Reflow States Section

"use client";

import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";

/**
 * ReflowStatesSection — four modules across three layouts, changed by the scroll at checkpoints.
 *
 * The section pins; at a third and two thirds of the way (with hysteresis)
 * the four modules re-lay into the next layout, all at once in 380ms, and
 * since each layout orders them differently, the break passes to the new
 * third, which overlaps its left-hand neighbour. The scroll only picks a
 * layout; nothing is scrubbed. Buttons move to each layout. Inside a
 * scrolling frame, pass `scroller` or provide ScrollRootContext.
 *
 * Part of the Broken Grid kit: a Klein-blue field #2416f0, paper plates
 * #f1f0e8, ink #0a0a1f, and acid #e2ff3a only where a rule fires. One rule,
 * "The Third": every third module in a run overshoots its leading edge by two

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