overlay.test.ts

import { describe, expect, it, vi } from 'vitest';
import {
  buildOverlayScript,
  isElementRectsMessage,
  isOverlayMessage,
  OVERLAY_SCRIPT,
} from './overlay';

interface FakeWindow {
  addEventListener: (type: string, fn: unknown, capture?: boolean) => void;
  parent: { postMessage: (msg: unknown, target: string) => void };
  __cs_err?: boolean;
  __cs_rej?: boolean;
  __cs_msg?: boolean;
}

function runOverlay(opts: { removeThrows?: boolean; addThrows?: boolean }): {
  warn: ReturnType<typeof vi.fn>;
  tick: () => void;
} {
  const warn = vi.fn();
  const fakeConsole = { warn };

  const fakeDocument = {
    body: {},
    addEventListener: () => {
      if (opts.addThrows) throw new Error('add failed');
    },
    removeEventListener: () => {
      if (opts.removeThrows) throw new Error('remove failed');
    },
  };

  const fakeWindow: FakeWindow = {
    addEventListener: () => {},
    parent: { postMessage: () => {} },
  };

  let intervalFn: (() => void) | null = null;
  const fakeSetInterval = (fn: () => void) => {
    intervalFn = fn;
    return 1;
  };

  const sandbox = new Function(
    'window',
    'document',
    'console',
    'setInterval',
    `with (window) { ${OVERLAY_SCRIPT} }`,
  );
  sandbox(fakeWindow, fakeDocument, fakeConsole, fakeSetInterval);

  return {
    warn,
    tick: () => {
      if (intervalFn) intervalFn();
    },
  };
}

describe('OVERLAY_SCRIPT reattach loop warning throttle', () => {
  it('dedupes repeated reattach failures across many ticks', () => {
    const { warn, tick } = runOverlay({ removeThrows: true, addThrows: true });
    // Initial reattach already ran inside script; simulate 25 more interval fires (~5s @ 200ms).
    for (let i = 0; i < 25; i++) tick();

    // 4 install specs (mouseover/mouseout/click/submit) * 2 ops (remove+add)
    // = 8 distinct keys at most. The point: it must not scale with tick count.
    expect(warn.mock.calls.length).toBeLessThanOrEqual(8);
  });

  it('emits at most one warn per unique error key over the whole loop', () => {
    const { warn, tick } = runOverlay({ removeThrows: true });
    for (let i = 0; i < 25; i++) tick();
    const keys = new Set(warn.mock.calls.map((c) => String(c[0])));
    // each warn call should be a unique key
    expect(warn.mock.calls.length).toBe(keys.size);
    // should be ≤ 4 (one per install-spec event type), well under the 25-tick spam ceiling
    expect(warn.mock.calls.length).toBeLessThanOrEqual(4);
  });
});

// ---------------------------------------------------------------------------
// SET_MODE trust boundary: control messages must come from window.parent.
// Untrusted in-iframe scripts could synthesise MessageEvent-shaped objects or
// bounce events off the iframe itself (window.postMessage(self, ...)), which
// would arrive with ev.source === window. Both paths must be rejected.
// ---------------------------------------------------------------------------

interface ListenerHarness {
  body: object;
  documentElement: { getAttribute: (name: string) => string | null };
  selectorMatches: Map<string, unknown[]>;
  elementIds: Map<string, unknown>;
  documentListeners: Map<string, (e: unknown) => void>;
  windowListeners: Map<string, (e: unknown) => void>;
  parent: object;
  postedToParent: unknown[];
  setHitTarget: (target: unknown) => void;
  runTick: () => void;
  queueMutations: (records: object[]) => void;
  hitLayer: { isConnected: boolean; style: Record<string, string>; textContent?: string };
}

function runOverlayWithHarness(script = OVERLAY_SCRIPT): ListenerHarness {
  const body = {};
  const selectorMatches = new Map<string, unknown[]>();
  const elementIds = new Map<string, unknown>();
  const documentListeners = new Map<string, (e: unknown) => void>();
  const windowListeners = new Map<string, (e: unknown) => void>();
  const postedToParent: unknown[] = [];
  const parent = { postMessage: (msg: unknown) => postedToParent.push(msg) };
  let hitTarget: unknown = null;
  let tick = () => {};
  const hitLayer = {
    isConnected: false,
    style: {} as Record<string, string>,
    setAttribute: () => {},
    addEventListener: () => {},
    remove: () => {
      hitLayer.isConnected = false;
    },
  };

  const fakeDocument = {
    body,
    querySelectorAll: (selector: string) => selectorMatches.get(selector) ?? [],
    querySelector: (selector: string) => selectorMatches.get(selector)?.[0] ?? null,
    createElement: () => hitLayer,
    documentElement: {
      attrs: {} as Record<string, string>,
      getAttribute(name: string) {
        return this.attrs[name] ?? null;
      },
      setAttribute(name: string, value: string) {
        this.attrs[name] = value;
      },
      appendChild: () => {
        hitLayer.isConnected = true;
      },
    },
    elementFromPoint: () => hitTarget,
    getElementById: (id: string) => elementIds.get(id) ?? null,
    addEventListener: (type: string, fn: (e: unknown) => void) => {
      documentListeners.set(type, fn);
    },
    removeEventListener: () => {},
  };
  let mutations: object[] = [];
  class MutationObserver {
    observe() {}
    takeRecords() {
      const records = mutations;
      mutations = [];
      return records;
    }
  }
  const fakeWindow = {
    MutationObserver,
    CSS: { escape: (value: string) => value.replaceAll(':', '\\:') },
    addEventListener: (type: string, fn: (e: unknown) => void) => {
      windowListeners.set(type, fn);
    },
    parent,
  };
  const fakeSetInterval = (fn: () => void) => {
    tick = fn;
    return 1;
  };
  const sandbox = new Function(
    'window',
    'document',
    'console',
    'setInterval',
    `with (window) { ${script} }`,
  );
  sandbox(fakeWindow, fakeDocument, { warn: () => {} }, fakeSetInterval);
  return {
    body,
    documentElement: fakeDocument.documentElement,
    selectorMatches,
    elementIds,
    documentListeners,
    windowListeners,
    parent,
    postedToParent,
    setHitTarget: (target) => {
      hitTarget = target;
    },
    runTick: () => tick(),
    queueMutations: (records) => {
      mutations.push(...records);
    },
    hitLayer,
  };
}

describe('OVERLAY_SCRIPT fragment navigation', () => {
  it.each([
    ['#courses', 'courses'],
    ['#%E8%AF%BE%E7%A8%8B', '课程'],
    ['#invalid%encoding', 'invalid%encoding'],
  ])('scrolls %s locally without following the workspace base URL', (href, id) => {
    const h = runOverlayWithHarness();
    const scrollIntoView = vi.fn();
    h.elementIds.set(id, { scrollIntoView });
    const preventDefault = vi.fn();
    const stopPropagation = vi.fn();
    h.documentListeners.get('click')?.({
      target: {
        tagName: 'SPAN',
        parentElement: {
          tagName: 'A',
          href: `workspace://design/${href}`,
          getAttribute: () => href,
        },
      },
      preventDefault,
      stopPropagation,
    });
    expect(preventDefault).toHaveBeenCalledOnce();
    expect(scrollIntoView).toHaveBeenCalledOnce();
    expect(stopPropagation).not.toHaveBeenCalled();
  });

  it.each([
    '#missing',
    '/missing-page',
    'https://example.com',
  ])('retains the navigation boundary for %s', (href) => {
    const h = runOverlayWithHarness();
    const preventDefault = vi.fn();
    const stopPropagation = vi.fn();
    h.documentListeners.get('click')?.({
      target: { tagName: 'A', href, getAttribute: () => href },
      preventDefault,
      stopPropagation,
    });
    expect(preventDefault).toHaveBeenCalledOnce();
    expect(stopPropagation).toHaveBeenCalledOnce();
  });

  function screenDouble(id: string) {
    const attrs: Record<string, string> = { 'data-oc-screen': id };
    return {
      id,
      scrollIntoView: vi.fn(),
      getAttribute: (name: string) => attrs[name] ?? null,
      setAttribute: (name: string, value: string) => {
        attrs[name] = value;
      },
      removeAttribute: (name: string) => {
        delete attrs[name];
      },
    };
  }

  it('shows the targeted data-oc-screen without scrolling or leaving the document', () => {
    const h = runOverlayWithHarness();
    const home = screenDouble('home');
    const pricing = screenDouble('pricing');
    h.elementIds.set('pricing', pricing);
    h.selectorMatches.set('[data-oc-screen]', [h.documentElement, home, pricing]);
    const preventDefault = vi.fn();
    h.documentListeners.get('click')?.({
      target: { tagName: 'A', href: '#pricing', getAttribute: () => '#pricing' },
      preventDefault,
      stopPropagation: vi.fn(),
    });
    expect(h.documentElement.getAttribute('data-oc-active-screen')).toBe('pricing');
    expect(h.documentElement.getAttribute('data-oc-screen')).toBeNull();
    expect(pricing.getAttribute('hidden')).toBeNull();
    expect(home.getAttribute('hidden')).toBe('');
    expect(h.documentElement.getAttribute('hidden')).toBeNull();
    expect(preventDefault).toHaveBeenCalledOnce();
    expect(pricing.scrollIntoView).not.toHaveBeenCalled();
  });

  it('selects the first screen when the document renders one later', () => {
    const h = runOverlayWithHarness();
    const home = screenDouble('home');
    const pricing = screenDouble('pricing');
    h.selectorMatches.set('[data-oc-screen]', [home, pricing]);
    h.runTick();
    expect(h.documentElement.getAttribute('data-oc-active-screen')).toBe('home');
    expect(home.getAttribute('hidden')).toBeNull();
    expect(pricing.getAttribute('hidden')).toBe('');
  });
});

describe('OVERLAY_SCRIPT fullscreen Escape forwarding', () => {
  it('waits for artifact handlers before forwarding an unconsumed Escape', async () => {
    const harness = runOverlayWithHarness();
    harness.windowListeners.get('keydown')?.({ key: 'Escape' });
    expect(harness.postedToParent).toEqual([]);
    await Promise.resolve();
    expect(harness.postedToParent).toContainEqual({ __codesign: true, type: 'PREVIEW_ESCAPE' });
  });

  it('respects artifact dialogs, IME composition and non-Escape keys', async () => {
    const harness = runOverlayWithHarness();
    const onKey = harness.windowListeners.get('keydown');
    const consumed = { key: 'Escape', defaultPrevented: false };
    onKey?.(consumed);
    consumed.defaultPrevented = true;
    onKey?.({ key: 'Escape', isComposing: true });
    onKey?.({ key: 'Escape', keyCode: 229 });
    onKey?.({ key: 'Enter' });
    await Promise.resolve();
    expect(harness.postedToParent).toEqual([]);
  });
});

describe('OVERLAY_SCRIPT stable clicked targets', () => {
  function select(h: ListenerHarness, target: object) {
    h.windowListeners.get('message')?.({
      source: h.parent,
      data: { __codesign: true, type: 'SET_MODE', mode: 'comment' },
    });
    h.documentListeners.get('click')?.({
      preventDefault: () => {},
      stopPropagation: () => {},
      target,
    });
    return h.postedToParent.find(
      (message) => (message as { type: string }).type === 'ELEMENT_SELECTED',
    );
  }
  const element = (parent: object) => ({
    nodeType: 1,
    tagName: 'BUTTON',
    id: 'repeat',
    parentElement: parent,
    previousElementSibling: null as object | null,
    style: { outline: '3px dashed green' },
    outerHTML: '<button id="repeat">Second</button>',
    getBoundingClientRect: () => ({ top: 10, left: 20, width: 100, height: 40 }),
  });
  it('falls back to the exact body path when two elements share an ID', () => {
    const h = runOverlayWithHarness();
    const first = element(h.body);
    const second = { ...element(h.body), previousElementSibling: first };
    h.selectorMatches.set('#repeat', [first, second]);
    expect(select(h, second)).toMatchObject({ selector: '/button[2]' });
  });
  it('uses an escaped ID only when it uniquely identifies the clicked element', () => {
    const h = runOverlayWithHarness();
    const target = { ...element(h.body), id: 'colon:id' };
    h.selectorMatches.set('#colon\\:id', [target]);
    expect(select(h, target)).toMatchObject({ selector: '#colon\\:id' });
  });
  it('restores a pre-existing outline after hover and pin without scrolling a clicked target', () => {
    const h = runOverlayWithHarness();
    const scrollIntoView = vi.fn();
    const target = { ...element(h.body), scrollIntoView };
    select(h, target);
    h.windowListeners.get('message')?.({
      source: h.parent,
      data: { __codesign: true, type: 'CLEAR_PIN' },
    });
    expect(target.style.outline).toBe('3px dashed green');
    expect(scrollIntoView).not.toHaveBeenCalled();
  });
});

describe('OVERLAY_SCRIPT SET_MODE source validation', () => {
  it('drops SET_MODE messages whose source is not window.parent (forged)', () => {
    const h = runOverlayWithHarness();
    const onMessage = h.windowListeners.get('message');
    const onClick = h.documentListeners.get('click');
    expect(onMessage).toBeDefined();
    expect(onClick).toBeDefined();

    // Forged: source is the iframe itself (e.g. window.postMessage(self,...)),
    // not the embedding parent. Even though the envelope looks valid, the
    // mode must NOT switch to 'comment'.
    const forgedSource = {};
    onMessage?.({
      source: forgedSource,
      data: { __codesign: true, type: 'SET_MODE', mode: 'comment' },
    });

    // currentMode is internal to the IIFE, so we observe via the click gate:
    // in default mode, clicks must not be intercepted (no postMessage to parent).
    onClick?.({
      preventDefault: () => {},
      stopPropagation: () => {},
      target: { tagName: 'DIV', getBoundingClientRect: () => ({}), outerHTML: '<div/>' },
    });
    expect(h.postedToParent).toHaveLength(0);
  });

  it('accepts SET_MODE only when ev.source === window.parent', () => {
    const h = runOverlayWithHarness();
    const onMessage = h.windowListeners.get('message');
    const onClick = h.documentListeners.get('click');

    onMessage?.({
      source: h.parent,
      data: { __codesign: true, type: 'SET_MODE', mode: 'comment' },
    });

    // Now in comment mode → click should be intercepted and posted to parent.
    onClick?.({
      preventDefault: () => {},
      stopPropagation: () => {},
      target: {
        tagName: 'BUTTON',
        getBoundingClientRect: () => ({ top: 1, left: 2, width: 3, height: 4 }),
        outerHTML: '<button/>',
      },
    });
    expect(h.postedToParent).toHaveLength(1);
    expect((h.postedToParent[0] as { type: string }).type).toBe('ELEMENT_SELECTED');
  });

  it('drops messages with no source (null) even when envelope matches', () => {
    const h = runOverlayWithHarness();
    const onMessage = h.windowListeners.get('message');
    const onClick = h.documentListeners.get('click');

    onMessage?.({
      source: null,
      data: { __codesign: true, type: 'SET_MODE', mode: 'comment' },
    });

    onClick?.({
      preventDefault: () => {},
      stopPropagation: () => {},
      target: { tagName: 'DIV', getBoundingClientRect: () => ({}), outerHTML: '<div/>' },
    });
    expect(h.postedToParent).toHaveLength(0);
  });
});

// ---------------------------------------------------------------------------
// WATCH_SELECTORS + scroll/resize → ELEMENT_RECTS broadcast.
// The iframe owns the source of truth for each pinned element's rect; the
// parent can't observe iframe-internal scroll, so pins drift without this.
// ---------------------------------------------------------------------------

interface RectHarness {
  documentListeners: Map<string, (e: unknown) => void>;
  windowListeners: Map<string, (e: unknown) => void>;
  parent: object;
  postedToParent: Array<Record<string, unknown>>;
  runRaf: () => void;
  registerElement: (selector: string, rect: DOMRect, visible?: boolean) => void;
  registerBodyPath: (selector: string, rect: DOMRect) => void;
}

interface FakeElement {
  tagName: string;
  children: FakeElement[];
  getBoundingClientRect: () => DOMRect;
  scrollIntoView: () => void;
  style: { outline?: string };
  getClientRects?: () => DOMRect[];
}

function runOverlayForRects(): RectHarness {
  const documentListeners = new Map<string, (e: unknown) => void>();
  const windowListeners = new Map<string, (e: unknown) => void>();
  const posted: Array<Record<string, unknown>> = [];
  const parent = { postMessage: (msg: unknown) => posted.push(msg as Record<string, unknown>) };
  const elements = new Map<
    string,
    {
      getBoundingClientRect: () => DOMRect;
      getClientRects?: () => DOMRect[];
      scrollIntoView: () => void;
      style: { outline?: string };
    }
  >();
  const makeElement = (tagName: string, rect = makeRect(0, 0, 0, 0)): FakeElement => ({
    tagName,
    children: [],
    getBoundingClientRect: () => rect,
    scrollIntoView: () => {},
    style: {},
  });
  const body = makeElement('BODY');

  const fakeDocument = {
    body,
    addEventListener: (type: string, fn: (e: unknown) => void) => {
      documentListeners.set(type, fn);
    },
    removeEventListener: () => {},
    querySelector: (sel: string) => elements.get(sel) ?? null,
    evaluate: (sel: string) => ({ singleNodeValue: elements.get(sel) ?? null }),
  };
  let pendingRaf: (() => void) | null = null;
  const fakeWindow = {
    addEventListener: (type: string, fn: (e: unknown) => void) => {
      windowListeners.set(type, fn);
    },
    parent,
    requestAnimationFrame: (fn: () => void) => {
      pendingRaf = fn;
      return 42;
    },
  };
  const fakeSetInterval = () => 1;
  const sandbox = new Function(
    'window',
    'document',
    'console',
    'setInterval',
    `with (window) { ${OVERLAY_SCRIPT} }`,
  );
  sandbox(fakeWindow, fakeDocument, { warn: () => {} }, fakeSetInterval);

  return {
    documentListeners,
    windowListeners,
    parent,
    postedToParent: posted,
    runRaf: () => {
      const fn = pendingRaf;
      pendingRaf = null;
      if (fn) fn();
    },
    registerElement: (selector, rect, visible = true) => {
      elements.set(selector, {
        getBoundingClientRect: () => rect,
        scrollIntoView: () => {},
        style: {},
        getClientRects: () => (visible ? [rect] : []),
      });
    },
    registerBodyPath: (selector, rect) => {
      const parts = selector.slice(1).split('/');
      let current = body;
      for (const part of parts) {
        const match = /^([a-zA-Z][a-zA-Z0-9-]*)\[(\d+)\]$/.exec(part);
        if (!match) throw new Error(`Invalid test selector: ${selector}`);
        const tag = String(match[1]).toUpperCase();
        const index = Number(match[2]);
        let seen = 0;
        let next: FakeElement | undefined;
        for (const child of current.children) {
          if (child.tagName.toUpperCase() === tag) {
            seen += 1;
            if (seen === index) {
              next = child;
              break;
            }
          }
        }
        while (!next) {
          const created = makeElement(tag);
          if (tag === 'SVG' || tag === 'PATH') created.tagName = tag.toLowerCase();
          current.children.push(created);
          seen += 1;
          if (seen === index) next = created;
        }
        current = next;
      }
      current.getBoundingClientRect = () => rect;
    },
  };
}

function makeRect(top: number, left: number, width: number, height: number): DOMRect {
  return {
    top,
    left,
    width,
    height,
    bottom: top + height,
    right: left + width,
    x: left,
    y: top,
    toJSON: () => ({}),
  } as DOMRect;
}

describe('selection payload validation', () => {
  const message = {
    __codesign: true,
    type: 'ELEMENT_SELECTED',
    selector: '#target',
    tag: 'button',
    outerHTML: '<button/>',
    rect: { top: 1, left: 2, width: 3, height: 4 },
  };
  it('requires actual element metadata, not just an envelope', () => {
    expect(isOverlayMessage({ __codesign: true, type: 'ELEMENT_SELECTED' })).toBe(false);
    expect(isOverlayMessage(message)).toBe(true);
  });
  it.each([Number.NaN, Number.POSITIVE_INFINITY, -1])('rejects invalid sizes %s', (width) => {
    const rect = { ...message.rect, width };
    expect(isOverlayMessage({ ...message, rect })).toBe(false);
    expect(
      isElementRectsMessage({
        __codesign: true,
        type: 'ELEMENT_RECTS',
        entries: [{ selector: '#target', rect }],
      }),
    ).toBe(false);
  });
});

describe('OVERLAY_SCRIPT rect broadcast', () => {
  it('resolves nested SVG paths using the same case normalization as HTML ancestors', () => {
    const h = runOverlayForRects();
    h.registerBodyPath('/button[2]/svg[1]/path[1]', makeRect(30, 40, 20, 20));
    h.windowListeners.get('message')?.({
      source: h.parent,
      data: { __codesign: true, type: 'WATCH_SELECTORS', selectors: ['/button[2]/svg[1]/path[1]'] },
    });
    h.runRaf();
    expect(h.postedToParent.at(-1)?.['entries']).toEqual([
      {
        selector: '/button[2]/svg[1]/path[1]',
        rect: { top: 30, left: 40, width: 20, height: 20 },
      },
    ]);
  });

  it('reports an empty measured set instead of retaining a hidden layer rectangle', () => {
    const h = runOverlayForRects();
    h.registerElement('#hidden', makeRect(0, 0, 0, 0), false);
    h.windowListeners.get('message')?.({
      source: h.parent,
      data: { __codesign: true, type: 'WATCH_SELECTORS', selectors: ['#hidden'] },
    });
    h.runRaf();
    expect(h.postedToParent.at(-1)).toMatchObject({ type: 'ELEMENT_RECTS', entries: [] });
  });
  it('broadcasts ELEMENT_RECTS after WATCH_SELECTORS message', () => {
    const h = runOverlayForRects();
    h.registerElement('#a', makeRect(10, 20, 30, 40));
    const onMessage = h.windowListeners.get('message');
    onMessage?.({
      source: h.parent,
      data: { __codesign: true, type: 'WATCH_SELECTORS', selectors: ['#a'] },
    });

    h.runRaf();

    const rectMsg = h.postedToParent.find((m) => m['type'] === 'ELEMENT_RECTS');
    expect(rectMsg).toBeDefined();
    const entries = rectMsg?.['entries'] as Array<{
      selector: string;
      rect: Record<string, number>;
    }>;
    expect(entries).toHaveLength(1);
    expect(entries[0]).toMatchObject({
      selector: '#a',
      rect: { top: 10, left: 20, width: 30, height: 40 },
    });
  });

  it('re-broadcasts on scroll so pins track the element', () => {
    const h = runOverlayForRects();
    h.registerElement('#a', makeRect(100, 0, 50, 50));

    h.windowListeners.get('message')?.({
      source: h.parent,
      data: { __codesign: true, type: 'WATCH_SELECTORS', selectors: ['#a'] },
    });
    h.runRaf();
    const firstCount = h.postedToParent.filter((m) => m['type'] === 'ELEMENT_RECTS').length;
    expect(firstCount).toBe(1);

    // Simulate the user scrolling the iframe content: the element's top moved.
    h.registerElement('#a', makeRect(30, 0, 50, 50));
    const onScroll = h.windowListeners.get('scroll');
    expect(onScroll).toBeDefined();
    onScroll?.({});
    h.runRaf();

    const all = h.postedToParent.filter((m) => m['type'] === 'ELEMENT_RECTS');
    expect(all).toHaveLength(2);
    const lastEntries = all[1]?.['entries'] as Array<{ rect: Record<string, number> }>;
    expect(lastEntries[0]?.rect['top']).toBe(30);
  });

  it('coalesces burst of scroll events into one rAF-scheduled broadcast', () => {
    const h = runOverlayForRects();
    h.registerElement('#a', makeRect(0, 0, 1, 1));
    h.windowListeners.get('message')?.({
      source: h.parent,
      data: { __codesign: true, type: 'WATCH_SELECTORS', selectors: ['#a'] },
    });
    h.runRaf(); // initial broadcast from WATCH_SELECTORS

    const onScroll = h.windowListeners.get('scroll');
    onScroll?.({});
    onScroll?.({});
    onScroll?.({});
    h.runRaf();

    const all = h.postedToParent.filter((m) => m['type'] === 'ELEMENT_RECTS');
    // Initial + exactly one from the burst — not three.
    expect(all).toHaveLength(2);
  });

  it('silently skips selectors that do not resolve to elements', () => {
    const h = runOverlayForRects();
    h.registerElement('#live', makeRect(5, 5, 5, 5));
    h.windowListeners.get('message')?.({
      source: h.parent,
      data: {
        __codesign: true,
        type: 'WATCH_SELECTORS',
        selectors: ['#live', '#ghost'],
      },
    });
    h.runRaf();
    const rectMsg = h.postedToParent.find((m) => m['type'] === 'ELEMENT_RECTS');
    const entries = rectMsg?.['entries'] as Array<{ selector: string }>;
    expect(entries).toHaveLength(1);
    expect(entries[0]?.selector).toBe('#live');
  });

  it('pins and watches a selector sent from the parent', () => {
    const h = runOverlayForRects();
    h.registerElement('#saved-comment-target', makeRect(12, 24, 48, 96));

    h.windowListeners.get('message')?.({
      source: h.parent,
      data: {
        __codesign: true,
        type: 'PIN_SELECTOR',
        selector: '#saved-comment-target',
      },
    });
    h.runRaf();

    const rectMsg = h.postedToParent.find((m) => m['type'] === 'ELEMENT_RECTS');
    expect(rectMsg).toBeDefined();
    const entries = rectMsg?.['entries'] as Array<{
      selector: string;
      rect: Record<string, number>;
    }>;
    expect(entries[0]).toMatchObject({
      selector: '#saved-comment-target',
      rect: { top: 12, left: 24, width: 48, height: 96 },
    });
  });

  it('resolves body-relative XPath selectors saved by click selection', () => {
    const h = runOverlayForRects();
    h.registerBodyPath('/div[1]/span[1]', makeRect(20, 30, 40, 50));

    h.windowListeners.get('message')?.({
      source: h.parent,
      data: {
        __codesign: true,
        type: 'PIN_SELECTOR',
        selector: '/div[1]/span[1]',
      },
    });
    h.runRaf();

    const rectMsg = h.postedToParent.find((m) => m['type'] === 'ELEMENT_RECTS');
    const entries = rectMsg?.['entries'] as Array<{
      selector: string;
      rect: Record<string, number>;
    }>;
    expect(entries[0]).toMatchObject({
      selector: '/div[1]/span[1]',
      rect: { top: 20, left: 30, width: 40, height: 50 },
    });
  });
});

describe('source provenance selection hints', () => {
  const context = {
    sourceHash: 'a'.repeat(64),
    previewRevision: 'preview-1',
    targets: { '10:50': 'button' },
  };
  function click(
    h: ListenerHarness,
    marker: string | null,
    tagName = 'BUTTON',
    parent?: object,
    childNodes: { nodeType: number; textContent: string }[] = [],
  ) {
    h.windowListeners.get('message')?.({
      source: h.parent,
      data: { __codesign: true, type: 'SET_MODE', mode: 'comment' },
    });
    h.documentListeners.get('click')?.({
      preventDefault: () => {},
      stopPropagation: () => {},
      target: {
        nodeType: 1,
        tagName,
        parentElement: parent ?? h.body,
        style: {},
        outerHTML: '<button>Save</button>',
        childNodes,
        getAttribute: (name: string) => (name === 'data-codesign-source-id' ? marker : null),
        getBoundingClientRect: () => ({ top: 0, left: 0, width: 10, height: 10 }),
      },
    });
    return h.postedToParent.at(-1);
  }
  it('emits only the clicked host own known marker and bound revisions', () => {
    const h = runOverlayWithHarness(buildOverlayScript(context));
    const selection = click(h, 'preview-1:10:50');
    expect(selection).toMatchObject({
      sourceEdit: {
        targetId: '10:50',
        sourceHash: context.sourceHash,
        previewRevision: 'preview-1',
      },
    });
    expect(isOverlayMessage(selection)).toBe(true);
  });
  it('validates direct text without consuming icon or emphasized sibling content', () => {
    const h = runOverlayWithHarness(
      buildOverlayScript({ ...context, directTexts: { '10:50': ' Save now' } }),
    );
    expect(
      click(h, 'preview-1:10:50', 'BUTTON', undefined, [
        { nodeType: 1, textContent: 'icon' },
        { nodeType: 3, textContent: ' Save' },
        { nodeType: 8, textContent: 'React separator' },
        { nodeType: 3, textContent: ' now' },
      ]),
    ).toHaveProperty('sourceEdit');
  });
  it.each([
    'Changed by an effect',
    'Save now',
    ' Save now!',
  ])('refuses DOM text changed from the inspected definition: %s', (textContent) => {
    const h = runOverlayWithHarness(
      buildOverlayScript({ ...context, directTexts: { '10:50': ' Save now' } }),
    );
    expect(
      click(h, 'preview-1:10:50', 'BUTTON', undefined, [{ nodeType: 3, textContent }]),
    ).not.toHaveProperty('sourceEdit');
  });
  it('never guesses an ancestor origin or trusts unknown marker/tag pairs', () => {
    for (const [marker, tagName] of [
      [null, 'SPAN'],
      ['preview-1:99:100', 'BUTTON'],
      ['preview-1:10:50', 'DIV'],
    ] as const) {
      const h = runOverlayWithHarness(buildOverlayScript(context));
      const parent = {
        nodeType: 1,
        tagName: 'BUTTON',
        parentElement: h.body,
        getAttribute: () => 'preview-1:10:50',
      };
      expect(click(h, marker, tagName, parent)).not.toHaveProperty('sourceEdit');
    }
  });
  it.each([
    '10:50',
    'author-value',
    'preview-old:10:50',
    'preview-1:99:100',
  ])('ignores authored, stale or unmapped attribute values: %s', (marker) => {
    const h = runOverlayWithHarness(buildOverlayScript(context));
    const selection = click(h, marker);
    expect(isOverlayMessage(selection)).toBe(true);
    expect(selection).not.toHaveProperty('sourceEdit');
  });
  it('does not treat a current-looking marker as provenance without an injected target', () => {
    const h = runOverlayWithHarness(buildOverlayScript({ ...context, targets: {} }));
    expect(click(h, 'preview-1:10:50')).not.toHaveProperty('sourceEdit');
  });
  it('keeps old comments compatible and ignores authored markers without an inspect plan', () => {
    const h = runOverlayWithHarness();
    const selection = click(h, 'preview-1:10:50');
    expect(isOverlayMessage(selection)).toBe(true);
    expect(selection).not.toHaveProperty('sourceEdit');
  });
  it('does not accept a forged parent control message even with a source-edit plan', () => {
    const h = runOverlayWithHarness(buildOverlayScript(context));
    h.windowListeners.get('message')?.({
      source: {},
      data: { __codesign: true, type: 'SET_MODE', mode: 'comment' },
    });
    h.documentListeners.get('click')?.({ target: { tagName: 'BUTTON' } });
    expect(h.postedToParent).toEqual([]);
  });
  it('bounds metadata and existing selection strings', () => {
    const h = runOverlayWithHarness(buildOverlayScript(context));
    const message = click(h, 'preview-1:10:50');
    if (!isOverlayMessage(message)) throw new Error('Missing fixture selection');
    for (const invalid of [
      { ...message, sourceEdit: { ...message.sourceEdit, path: '../outside.jsx' } },
      { ...message, sourceEdit: { ...message.sourceEdit, sourceHash: 'old' } },
      { ...message, selector: 'x'.repeat(8193) },
      { ...message, outerHTML: 'x'.repeat(801) },
      { ...message, parentOuterHTML: 'x'.repeat(601) },
      { ...message, tag: 'x'.repeat(129) },
    ])
      expect(isOverlayMessage(invalid)).toBe(false);
  });
});

describe('unified preview edit selection and validation', () => {
  const sourceHash = 'b'.repeat(64);
  const previewRevision = 'preview-edit';
  function fixture() {
    const h = runOverlayWithHarness(
      buildOverlayScript({
        sourceHash,
        previewRevision,
        targets: { '10:50': 'button' },
        fieldPlans: {
          '10:50': {
            textLayout: [
              { kind: 'text', textId: '11:20', value: 'Cart (' },
              { kind: 'dynamic' },
              { kind: 'text', textId: '30:40', value: ')' },
            ],
            editableFields: [
              { kind: 'set-text', textId: '11:20', value: 'Cart (' },
              { kind: 'set-text', textId: '30:40', value: ')' },
            ],
          },
        },
      }),
    );
    const button = {
      nodeType: 1,
      tagName: 'BUTTON',
      id: 'cart',
      parentElement: h.body,
      style: {},
      isConnected: true,
      outerHTML: '<button disabled>Cart (2)</button>',
      childNodes: [
        { nodeType: 3, textContent: 'Cart (' },
        { nodeType: 3, textContent: '2' },
        { nodeType: 3, textContent: ')' },
      ],
      getAttribute: (name: string) =>
        name === 'data-codesign-source-id' ? 'preview-edit:10:50' : null,
      getBoundingClientRect: () => ({ top: 0, left: 0, width: 100, height: 30 }),
    };
    h.selectorMatches.set('#cart', [button]);
    h.setHitTarget(button);
    function control(type: string, extra: Record<string, unknown> = {}) {
      h.windowListeners.get('message')?.({
        source: h.parent,
        data: { __codesign: true, type, sourceHash, previewRevision, ...extra },
      });
    }
    control('SET_MODE', { mode: 'source-edit' });
    function pointer() {
      const preventDefault = vi.fn();
      const stopImmediatePropagation = vi.fn();
      h.documentListeners.get('pointerdown')?.({
        type: 'pointerdown',
        clientX: 10,
        clientY: 10,
        preventDefault,
        stopImmediatePropagation,
        target: h.hitLayer,
      });
      return { preventDefault, stopImmediatePropagation };
    }
    return { h, button, control, pointer };
  }
  it('selects disabled hosts via a removable hit layer without dispatching artifact clicks', () => {
    const { h, control, pointer } = fixture();
    expect(h.hitLayer.isConnected).toBe(true);
    const event = pointer();
    expect(event.preventDefault).toHaveBeenCalledOnce();
    expect(event.stopImmediatePropagation).toHaveBeenCalledOnce();
    const selected = h.postedToParent.at(-1);
    expect(isOverlayMessage(selected)).toBe(true);
    expect(selected).toMatchObject({
      sourceEditRevision: { sourceHash, previewRevision },
      sourceEdit: {
        targetId: '10:50',
        fieldStates: [
          { key: 'text:11:20', status: 'ready' },
          { key: 'text:30:40', status: 'ready' },
        ],
      },
    });
    control('SET_MODE', { mode: 'default' });
    expect(h.hitLayer.isConnected).toBe(false);
  });
  it('revalidates the pinned instance immediately before saving and reports DOM changes', () => {
    const { h, button, control, pointer } = fixture();
    pointer();
    const prefixNode = button.childNodes[0];
    if (!prefixNode) throw new Error('Missing text node');
    prefixNode.textContent = 'Changed (';
    control('SOURCE_EDIT_VALIDATE', {
      requestId: 'save-1',
      targetId: '10:50',
      fieldKey: 'text:11:20',
    });
    expect(h.postedToParent.at(-1)).toMatchObject({
      type: 'SOURCE_EDIT_VALIDATED',
      requestId: 'save-1',
      sourceEdit: {
        fieldStates: [
          { key: 'text:11:20', status: 'changed' },
          { key: 'text:30:40', status: 'ready' },
        ],
      },
    });
    h.runTick();
    expect(h.postedToParent.at(-1)).toMatchObject({
      type: 'ELEMENT_SELECTED',
      sourceEdit: {
        fieldStates: [
          { key: 'text:11:20', status: 'changed' },
          { key: 'text:30:40', status: 'ready' },
        ],
      },
    });
    button.isConnected = false;
    control('SOURCE_EDIT_VALIDATE', {
      requestId: 'save-2',
      targetId: '10:50',
      fieldKey: 'text:11:20',
    });
    expect(h.postedToParent.at(-1)).toMatchObject({
      type: 'SOURCE_EDIT_VALIDATED',
      sourceEdit: null,
    });
  });
  it('requires current trusted controls and explicit ancestor navigation', () => {
    const { h, button, control, pointer } = fixture();
    const icon = {
      ...button,
      tagName: 'SVG',
      id: 'icon',
      parentElement: button,
      outerHTML: '<svg/>',
      getAttribute: () => null,
    };
    h.setHitTarget(icon);
    pointer();
    expect(h.postedToParent.at(-1)).toMatchObject({
      sourceEditAncestors: [{ selector: '#cart', tagName: 'button' }],
      sourceEditRevision: { sourceHash, previewRevision },
    });
    expect(h.postedToParent.at(-1)).not.toHaveProperty('sourceEdit');
    const count = h.postedToParent.length;
    h.windowListeners.get('message')?.({
      source: {},
      data: {
        __codesign: true,
        type: 'SOURCE_EDIT_SELECT',
        selector: '#cart',
        sourceHash,
        previewRevision,
      },
    });
    control('SOURCE_EDIT_SELECT', { selector: '#cart', previewRevision: 'old' });
    control('SOURCE_EDIT_SELECT', { selector: '#elsewhere' });
    expect(h.postedToParent).toHaveLength(count);
    control('SOURCE_EDIT_SELECT', { selector: '#cart' });
    expect(h.postedToParent.at(-1)).toMatchObject({ sourceEdit: { targetId: '10:50' } });
  });
  it('flushes pre-selection removals rather than binding a same-valued dynamic survivor', () => {
    const { h, button, pointer } = fixture();
    const removed = { nodeType: 3, textContent: 'Cart (' };
    // The first surviving node has the same value but came from dynamic content.
    h.queueMutations([
      { type: 'childList', target: button, removedNodes: [removed], addedNodes: [] },
    ]);
    pointer();
    expect(h.postedToParent.at(-1)).toMatchObject({
      sourceEdit: {
        fieldStates: [
          { key: 'text:11:20', status: 'changed' },
          { key: 'text:30:40', status: 'ready' },
        ],
      },
    });
  });
  it('retains original owners when changed text moves before the first observer delivery', () => {
    const { h, button, pointer } = fixture();
    const other = { getAttribute: () => null };
    const changed = { nodeType: 3, textContent: 'Z', parentElement: other };
    h.queueMutations([
      { type: 'characterData', target: changed, oldValue: 'Cart (' },
      { type: 'childList', target: button, removedNodes: [changed], addedNodes: [] },
      { type: 'childList', target: other, removedNodes: [], addedNodes: [changed] },
    ]);
    pointer();
    expect(h.postedToParent.at(-1)).toMatchObject({
      sourceEdit: {
        fieldStates: [
          { key: 'text:11:20', status: 'changed' },
          { key: 'text:30:40', status: 'ready' },
        ],
      },
    });
  });
  it('tracks exact static node identity without poisoning an established dynamic sibling', () => {
    const { h, button, pointer, control } = fixture();
    pointer();
    const dynamicNode = button.childNodes[1];
    const original = button.childNodes[0];
    if (!dynamicNode || !original) throw new Error('Missing fixture text');
    dynamicNode.textContent = 'Cart (';
    Object.assign(dynamicNode, { parentElement: button });
    h.queueMutations([{ type: 'characterData', target: dynamicNode, oldValue: '2' }]);
    control('SOURCE_EDIT_VALIDATE', {
      requestId: 'dynamic',
      targetId: '10:50',
      fieldKey: 'text:11:20',
    });
    expect(h.postedToParent.at(-1)).toMatchObject({
      sourceEdit: {
        fieldStates: [
          { key: 'text:11:20', status: 'ready' },
          { key: 'text:30:40', status: 'ready' },
        ],
      },
    });
    button.childNodes[0] = { nodeType: 3, textContent: 'Cart (' };
    h.queueMutations([
      {
        type: 'childList',
        target: button,
        removedNodes: [original],
        addedNodes: [button.childNodes[0]],
      },
    ]);
    control('SOURCE_EDIT_VALIDATE', {
      requestId: 'replacement',
      targetId: '10:50',
      fieldKey: 'text:11:20',
    });
    expect(h.postedToParent.at(-1)).toMatchObject({
      sourceEdit: {
        fieldStates: [
          { key: 'text:11:20', status: 'changed' },
          { key: 'text:30:40', status: 'ready' },
        ],
      },
    });
  });
  it('fails text readiness closed when mutation observation exceeds its budget', () => {
    const { h, button, pointer } = fixture();
    h.queueMutations(
      Array.from({ length: 4097 }, () => ({
        type: 'childList',
        target: button,
        removedNodes: [],
        addedNodes: [],
      })),
    );
    pointer();
    expect(h.postedToParent.at(-1)).toMatchObject({
      sourceEdit: { fieldStates: [{ status: 'unmapped' }, { status: 'unmapped' }] },
    });
  });
  it('bounds new field states, ancestor paths and revisions', () => {
    const { h, pointer } = fixture();
    pointer();
    const message = h.postedToParent.at(-1);
    if (!isOverlayMessage(message)) throw new Error('Missing selection');
    for (const invalid of [
      {
        ...message,
        sourceEdit: {
          ...message.sourceEdit,
          fieldStates: [{ key: 'text:11:20', status: 'approved' }],
        },
      },
      {
        ...message,
        sourceEdit: {
          ...message.sourceEdit,
          fieldStates: [{ key: 'text:11:20', status: 'ready', start: 0 }],
        },
      },
      {
        ...message,
        sourceEdit: {
          ...message.sourceEdit,
          fieldStates: [
            { key: 'text:11:20', status: 'ready' },
            { key: 'text:11:20', status: 'ready' },
          ],
        },
      },
      {
        ...message,
        sourceEditAncestors: Array.from({ length: 17 }, () => ({
          selector: '#cart',
          tagName: 'button',
        })),
      },
      {
        ...message,
        sourceEditAncestors: [{ selector: '#cart', tagName: 'button', sourcePath: '../other.jsx' }],
      },
      { ...message, sourceEditRevision: { sourceHash: 'bad', previewRevision } },
    ])
      expect(isOverlayMessage(invalid)).toBe(false);
  });
});