Transition + Animation Editor

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { Button } from "@/components/ui/button"
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger,
9} from "@/components/ui/popover"
10import { cn } from "@/lib/utils"
11import { AddLayerButton } from "./controls"
12import { AnimationFields, TransitionFields } from "./fields"
13import { TransitionPreview } from "./preview"
14import {
15  defaultAnimationLayer,
16  defaultTransitionLayer,
17  formatAnimation,
18  formatTransition,
19  layerCount,
20  parseAnimation,
21  parseTransition,
22} from "./transition-editor.helpers"
23import type {
24  AnimationLayer,
25  AnimationString,
26  EditorMode,
27  TransitionEditorState,
28  TransitionEditorStringMap,
29  TransitionLayer,
30  TransitionString,
31} from "./transition-editor.types"
32 
33// ---------------------------------------------------------------------------
34// Mode-keyed helper indirection
35// ---------------------------------------------------------------------------
36 
37type AnyLayer = TransitionLayer | AnimationLayer
38 
39/**
40 * Parse a value into a discriminated `{ mode, layers }` state, or `null` on a
41 * parse error. The `mode` literal tags the layer list so downstream `format`
42 * narrows the element type without a cast.
43 */
44function parseState(
45  mode: EditorMode,
46  value: string,
47): TransitionEditorState | null {
48  if (mode === "transition") {
49    const layers = parseTransition(value)
50    return layers === null ? null : { mode, layers }
51  }
52  const layers = parseAnimation(value)
53  return layers === null ? null : { mode, layers }
54}
55 
56/** Serialize a discriminated editor state. The `mode` tag narrows `layers`. */
57function formatState(state: TransitionEditorState): string {
58  return state.mode === "transition"
59    ? formatTransition(state.layers)
60    : formatAnimation(state.layers)
61}
62 
63/** A fresh default layer for the mode. */
64function defaultLayerFor(mode: EditorMode): AnyLayer {
65  return mode === "transition"
66    ? defaultTransitionLayer()
67    : defaultAnimationLayer()
68}
69 
70/**
71 * Re-tag a working `AnyLayer[]` as a discriminated `{ mode, layers }` state.
72 *
73 * This is the ONE place the editor asserts the layer kind matches the mode —
74 * unavoidable because the public `TransitionLayerRow` exposes an untagged
75 * `layer: AnyLayer` alongside a separate `mode` prop, so the type system cannot
76 * prove their correspondence. The editor only ever stores layers of the
77 * matching kind (parse + defaults + per-mode fields all produce them), so the
78// … truncated