Transform Builder

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 {
12  AddFunctionMenu,
13  ArgEditor,
14  FunctionSelect,
15} from "./transform-builder.arg-editor"
16import {
17  argSpec,
18  defaultItem,
19  formatTransform,
20  itemArgs,
21  itemFromArgs,
22  parseTransform,
23} from "./transform-builder.helpers"
24import { TransformPreview3D } from "./transform-builder.preview"
25import type {
26  TransformFunctionName,
27  TransformItem,
28  TransformString,
29} from "./transform-builder.types"
30 
31export type {
32  AddFunctionMenuProps,
33  ArgEditorProps,
34} from "./transform-builder.arg-editor"
35// Re-export the controls and the preview so the public surface of this
36// module is unchanged after the split (tests + index.ts import from here).
37export {
38  AddFunctionMenu,
39  ArgEditor,
40} from "./transform-builder.arg-editor"
41export type { TransformPreview3DProps } from "./transform-builder.preview"
42export { TransformPreview3D } from "./transform-builder.preview"
43 
44// ---------------------------------------------------------------------------
45// Shared props
46// ---------------------------------------------------------------------------
47 
48export interface TransformBuilderPanelProps {
49  value: TransformString | (string & {})
50  onChange: (value: TransformString) => void
51  className?: string
52  "aria-label"?: string
53}
54 
55export interface TransformBuilderProps extends TransformBuilderPanelProps {}
56 
57// ---------------------------------------------------------------------------
58// TransformBuilder — popover-wrapped
59// ---------------------------------------------------------------------------
60 
61export function TransformBuilder(props: TransformBuilderProps) {
62  const {
63    value,
64    className,
65    "aria-label": ariaLabel = "Edit a CSS transform",
66  } = props
67  const items = parseTransform(String(value)) ?? []
68 
69  return (
70    <Popover>
71      <PopoverTrigger asChild>
72        <Button
73          variant="outline"
74          className={cn("h-9 gap-2 px-3 font-mono", className)}
75          aria-label={ariaLabel}
76        >
77          <span aria-hidden="true" className="text-foreground/60">
78            ⤡
79          </span>
80          <span className="text-[10px] text-muted-foreground">
81            {items.length} {items.length === 1 ? "fn" : "fns"}
82          </span>
83          <span className="max-w-[180px] truncate text-xs">{value}</span>
84// … truncated