import type { PreviewAnnotationPayload } from "@t3tools/contracts";import { renderToStaticMarkup } from "react-dom/server";import { describe, expect, it, vi } from "vite-plus/test"; import { ComposerPreviewAnnotationCards } from "./ComposerPreviewAnnotationCards"; const annotation: PreviewAnnotationPayload = {  id: "annotation_1",  pageUrl: "http://localhost:3000/welcome",  pageTitle: "Welcome",  comment: "Make this headline feel intentional.",  elements: [],  regions: [{ id: "region_1", rect: { x: 1, y: 2, width: 30, height: 20 } }],  strokes: [],  styleChanges: [    {      targetId: "element_1",      selector: "h1",      property: "font-size",      previousValue: "32px",      value: "40px",    },  ],  screenshot: null,  createdAt: "2026-06-13T00:00:00.000Z",}; describe("ComposerPreviewAnnotationCards", () => {  it("presents the annotation as one contextual attachment", () => {    const markup = renderToStaticMarkup(      <ComposerPreviewAnnotationCards        annotations={[annotation]}        images={[]}        onRemove={vi.fn()}        onExpandImage={vi.fn()}      />,    );     expect(markup).toContain("Make this headline feel intentional.");    expect(markup.match(/data-slot="tooltip-trigger"/g)).toHaveLength(2);    expect(markup).not.toContain('title="1 region"');    expect(markup).not.toContain('title="1 style change"');    expect(markup).not.toContain("Welcome");    expect(markup).not.toContain("localhost:3000");    expect(markup).not.toContain("Preview annotation");  });   it("uses the shared button contract for removal", () => {    const markup = renderToStaticMarkup(      <ComposerPreviewAnnotationCards        annotations={[annotation]}        images={[]}        onRemove={vi.fn()}        onExpandImage={vi.fn()}      />,    );     expect(markup).toContain('aria-label="Remove preview annotation"');    expect(markup).toContain('data-slot="button"');  });});