Jiggle Grid

"use client";

import { useEffect, useId, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
import { AnimatePresence, animate, motion, motionValue, type MotionValue } from "motion/react";
import {
  IconBookFilled,
  IconCalendarFilled,
  IconCameraFilled,
  IconClockFilled,
  IconCloudFilled,
  IconListCheckFilled,
  IconMailFilled,
  IconMapPinFilled,
  IconMessageCircleFilled,
  IconMinus,
  IconPhotoFilled,
  IconSettingsFilled,
} from "@tabler/icons-react";
import { cn } from "@/lib/utils";

// Jiggle grid. A home-screen grid you rearrange like on a phone. Press and hold
// a tile (or press Edit) and every tile starts to wobble; drag one and it
// follows your finger exactly while the others spring out of its way to make
// room, then it drops into the gap. Tiles can be removed, and the rest close