"use client";

import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";

/**
 * TransformLoupeHero — a first screen whose picture is computed live, with a loupe of another transform.
 *
 * A plane of spheres under a low sun is traced in WebGL2 (soft shadows,
 * occlusion, a haze, the sun's glint in every sphere) and printed in
 * blue-noise dither, one cell per two CSS pixels, snapped to device pixels.
 * Under the pointer a loupe shows the same scene as shape-matched ASCII, a
 * halftone screen, Bayer or the source; the keys pick which, and the change
 * dissolves through blue noise. Drag across it to move the sun. Pass `image`
 * to transform your own picture instead. Draws only on screen; without
 * WebGL2 a CSS dither of a still stands in.
 *
 * Part of the Dither & ASCII kit: one ink, paper #f3f0e6, on a warm black

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}