import { expect, test } from "@playwright/test";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";

function readSource(path: string) {
  return readFileSync(resolve(process.cwd(), path), "utf8");
}

test.describe("canvas overlay density", () => {
  test("keeps the canvas model and mode menus compact", () => {
    const source = readSource("components/canvas/CanvasChatPanel.tsx");

    expect(source).toContain(
      "max-h-[360px] max-w-[calc(100vw-24px)]"
    );
    expect(source).toMatch(
      /style=\{\{ width: `\$\{modelSelectorWidth\}px` \}\}/
    );
    expect(source).toContain("DEFAULT_CANVAS_MODEL_SELECTOR_WIDTH = 360");
    expect(source).toContain(
      "h-9 rounded-[var(--ui-radius-control)] px-2.5 text-[13px]"
    );
    expect(source).not.toContain(
      "h-12 rounded-[14px] px-4 text-[17px]"
    );
    expect(source).not.toContain(
      "text-[17px] font-medium leading-none tracking-[-0.01em]"
    );
  });

  test("keeps shared dropdown and alert overlays on the global scale", () => {
    const dropdownSource = readSource("components/ui/dropdown-menu.tsx");
    const alertSource = readSource("components/ui/alert-dialog.tsx");

    expect(dropdownSource).toContain("text-[13px]");
    expect(dropdownSource).not.toContain("text-sm outline-none");
    expect(alertSource).toContain("text-base font-semibold leading-tight");
    expect(alertSource).toContain("text-[13px] leading-5");
    expect(alertSource).not.toContain("text-lg font-semibold");
  });
});