Code Block

"use client";

import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore, type CSSProperties } from "react";
import { AnimatePresence, MotionConfig, motion } from "motion/react";
import type { HighlighterCore } from "shiki/core";
import { cn } from "@/lib/utils";

// A code block for docs and landing pages. The code renders as plain text
// straight away (and on the server), then Shiki colours it in place once the
// block is near the viewport, so nothing shifts and pages with many blocks
// only pay for the ones being read. Shiki, its regex engine and each grammar
// are loaded on demand and shared by every block on the page.
//
// Tabs slide an underline between them and the body eases to the new height.
// Blocks given the same `syncKey` switch tabs together, and the choice is
// remembered, so picking pnpm once picks it everywhere. Lines can be marked,
// diffs get +/- gutters (copy gives you the result, not the patch), and long
// snippets can collapse behind a "Show all" that eases open.

export type CodeLang = "tsx" | "jsx" | "ts" | "js" | "bash" | "json" | "css" | "html" | "python" | "text";

export type CodeTab = {
  /** Shown on the tab, e.g. a file name or a package manager. */
  label: string;