Living Bento Grid

"use client";

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

/**
 * LivingBentoGrid — a bento feature grid that is a live system, not a
 * screenshot of one.
 *
 * - LIVE. Each tile renders from a `tick` that advances on a slow interval,
 *   so figures, sparklines and status lists move on their own while the
 *   section is on screen. It pauses off-screen, in hidden tabs, during a drag
 *   and under prefers-reduced-motion. Only content moves; the grid, the
 *   canvas and the hairlines never do.
 * - LIT. One light follows the pointer across the grid and catches every
 *   tile's hairline near it. Hover never lifts a tile.
 * - REORDERABLE. Drag a tile and the others slide out of its way (FLIP,
 *   a short spring), measured in layout pixels so it works inside scaled

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