Easing Picker

1"use client"
2 
3import type React from "react"
4import { useEffect, useRef, useState } from "react"
5import { Button } from "@/components/ui/button"
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/ui/popover"
11import { cn } from "@/lib/utils"
12import {
13  ALL_BASES,
14  DEFAULT_BEZIER_STATE,
15  DEFAULT_BY_BASIS,
16} from "./easing-picker.constants"
17import { formatEasing, matchPreset, parseEasing } from "./easing-picker.helpers"
18import type {
19  EasingBasis,
20  EasingState,
21  EasingString,
22  EasingStringMap,
23} from "./easing-picker.types"
24import { BasisControls } from "./panel/basis-controls"
25import { PreviewSection } from "./panel/preview-section"
26import type { PreviewProperty } from "./preview/easing-preview"
27import type { OutputFormat } from "./preview/output-panel"
28 
29// ---------------------------------------------------------------------------
30// Public re-exports — keep the barrel surface stable for tests + examples.
31// ---------------------------------------------------------------------------
32 
33export type { BezierCanvasProps } from "./controls/bezier-canvas"
34export { BezierCanvas } from "./controls/bezier-canvas"
35export type {
36  BounceControlsProps,
37  SpringControlsProps,
38  WiggleControlsProps,
39} from "./controls/physics-controls"
40export {
41  BounceControls,
42  SpringControls,
43  WiggleControls,
44} from "./controls/physics-controls"
45export type { PresetGalleryProps } from "./controls/preset-gallery"
46export { PresetGallery } from "./controls/preset-gallery"
47export type { StepsControlsProps } from "./controls/steps-controls"
48export { StepsControls } from "./controls/steps-controls"
49export type { Sample } from "./easing-picker.helpers"
50export {
51  bakeLinear,
52  bezierFromPreset,
53  formatEasing,
54  matchPreset,
55  PRESETS,
56  parseEasing,
57  sampleBounce,
58  sampleSpring,
59  sampleWiggle,
60} from "./easing-picker.helpers"
61export type {
62  EasingPreviewProps,
63  PreviewProperty,
64} from "./preview/easing-preview"
65export { EasingPreview } from "./preview/easing-preview"
66 
67// ---------------------------------------------------------------------------
68// EasingPicker — popover trigger wrapping the panel
69// ---------------------------------------------------------------------------
70 
71export interface EasingPickerProps<
72  TBasis extends EasingBasis | undefined = undefined,
73> extends EasingPanelProps<TBasis> {}
74 
75export function EasingPicker<
76  TBasis extends EasingBasis | undefined = undefined,
77>({
78  value,
79  onChange,
80  basis,
81  output,
82  className,
83// … truncated