Mitosis Menu

"use client";

import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { animate, motion, motionValue, type MotionValue } from "motion/react";
import { IconCameraFilled, IconFileFilled, IconMicrophoneFilled, IconPhotoFilled, IconPlus } from "@tabler/icons-react";
import { cn } from "@/lib/utils";

// Mitosis menu. A round button that divides into its options like a cell.
// Each option buds off the parent as a small droplet, a neck of liquid
// stretches between them, thins and snaps, and the droplet swells into a
// bubble; closing pulls them back in and they fuse. Each bubble is a circle
// tied to the parent by a stroke that thins as it travels, all drawn through
// an SVG goo filter (blur, then a hard alpha threshold) so shapes that are
// close melt into one and a neck too thin to survive the threshold breaks.
// Icons sit in a layer above the filter so they stay crisp.

export type MitosisItem = { id: string; label: string; icon?: ReactNode };

export type MitosisMenuProps = {
  items?: MitosisItem[];
  /** Which way the options fan out. */
  direction?: "up" | "down" | "left" | "right" | "radial";
  /** Distance from the button's centre to each option's, px. */
  distance?: number;