Fold Toolbar

"use client";

import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { AnimatePresence, MotionConfig, motion } from "motion/react";
import useMeasure from "react-use-measure";
import { IconX } from "@tabler/icons-react";
import { cn } from "@/lib/utils";

// Fold-out toolbar. At rest it's one icon button showing the current tool,
// with a small notch in its corner saying there's more inside. Pressing it
// unfolds a tray of tools along one side, pushing whatever sits next to it out
// of the way. Picking a tool folds the tray back into the button.
//
// The picked tool is one object that morphs between the button and its slot:
// opening, its icon leaves the button and travels out to its place in the tray
// as its tile fills in; closing, it travels back and hands over to the button
// in the last frames, same spot and colour, so there's no visible swap. It
// rides the same spring as the tray's edge, which it never outruns, so it's
// never clipped. The other tools stay put and settle in as the edge reaches
// them. The tray's real width (or height) springs, measured from the row, so
// nothing inside is ever scaled. One highlight slides between tools on hover. Escape or a press outside folds
// it without a choice; arrow keys move between the tools.

export type FoldTool = { value: string; label: string; icon: ReactNode; disabled?: boolean };