Advanced tools you will reuse

const controller = new AbortController();

async function load(signal: AbortSignal) {
  const res = await fetch('/api/blogs?limit=12', { signal });
  if (!res.ok) throw new Error('Failed to load');
  return res.json();
}

// later: controller.abort()

export async function getPosts() {
  try {
    const res = await fetch(`${process.env.API_URL}/blogs?limit=12`, {
      next: { revalidate: 60 },
    });
    if (!res.ok) return { items: [] };
    return res.json();
  } catch {
    return { items: [] };
  }
}

import { useEffect, useState } from 'react';

export function useDebounced<T>(value: T, ms = 300) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setV(value), ms);
    return () => clearTimeout(t);
  }, [value, ms]);
  return v;
}

.focusable {
  outline: none;
}
.focusable:focus-visible {
  box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #34d399;
}

You are a staff frontend engineer doing a PR review.

Task: Review the TypeScript React diff for bugs, a11y, and maintainability.

Constraints:
- Rank findings: blocker / major / nit
- Suggest patches, do not rewrite everything
- Flag XSS, unsafe HTML, and missing error/empty states

Output format:
1) Summary (3 bullets)
2) Findings table: severity | issue | fix
3) What looks good

You are a senior React engineer.

Task: Diagnose the bug and propose a minimal fix.

Constraints:
- Do not rewrite the whole file
- Prefer stable references over removing effects blindly
- Call out if the root cause is in the parent

Output format:
1) Root cause
2) Minimal code fix
3) How to verify

import { z } from 'zod';

const envSchema = z.object({
  NEXT_PUBLIC_API_URL: z.string().url(),
  NEXT_PUBLIC_SITE_URL: z.string().url(),
});

export const env = envSchema.parse({
  NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
  NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
});

export function articleJsonLd(input: {
  title: string;
  description: string;
  url: string;
  datePublished: string;
  dateModified?: string;
}) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: input.title,
    description: input.description,
    datePublished: input.datePublished,
    dateModified: input.dateModified || input.datePublished,
    mainEntityOfPage: input.url,
  };
}