Code Diff

1"use client";
2 
3import {
4  useState,
5  useCallback,
6  useEffect,
7  useMemo,
8  createContext,
9  use,
10  type ReactNode,
11} from "react";
12import {
13  FileDiff as PierreFileDiff,
14  PatchDiff as PierrePatchDiff,
15} from "@pierre/diffs/react";
16import { parseDiffFromFile, RegisteredCustomThemes } from "@pierre/diffs";
17import type { FileDiffMetadata, ThemesType } from "@pierre/diffs";
18import { Copy, Check, ChevronDown, ChevronUp } from "lucide-react";
19import type { CodeDiffProps } from "./schema";
20import { useCopyToClipboard } from "../shared/use-copy-to-clipboard";
21import { Button, cn, Collapsible, CollapsibleTrigger } from "./_adapter";
22 
23/*
24 * Pierre's shared_highlighter registers custom themes with dynamic imports
25 * (`import("../themes/pierre-dark.js")`) that fail under Turbopack because the
26 * package `exports` field doesn't include those subpaths. We override the
27 * RegisteredCustomThemes map entries with loaders that point to local vendored
28 * theme files in `components/tool-ui/shared`, which Turbopack can resolve.
29 */
30RegisteredCustomThemes.set("pierre-dark", () =>
31  import("../shared/pierre-dark-theme.js").then((m) => m.default as never),
32);
33RegisteredCustomThemes.set("pierre-light", () =>
34  import("../shared/pierre-light-theme.js").then((m) => m.default as never),
35);
36 
37const COPY_ID = "codediff-code";
38 
39/* ── Theme detection (mirrors CodeBlock) ────────────────────────── */
40 
41function getSystemTheme(): "light" | "dark" {
42  if (typeof window === "undefined") return "light";
43  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
44    ? "dark"
45    : "light";
46}
47 
48function getDocumentTheme(): "light" | "dark" | null {
49  if (typeof document === "undefined") return null;
50  const root = document.documentElement;
51  const dataTheme = root.getAttribute("data-theme")?.toLowerCase();
52  if (dataTheme === "dark") return "dark";
53  if (dataTheme === "light") return "light";
54  if (root.classList.contains("dark")) return "dark";
55  if (root.classList.contains("light")) return "light";
56  return null;
57}
58 
59function useResolvedTheme(): "light" | "dark" {
60  const [theme, setTheme] = useState<"light" | "dark">(() => {
61    return getDocumentTheme() ?? getSystemTheme();
62  });
63 
64  useEffect(() => {
65    if (typeof window === "undefined" || typeof document === "undefined") {
66      return;
67    }
68 
69    const update = () => setTheme(getDocumentTheme() ?? getSystemTheme());
70 
71// … truncated