Calc Editor

1"use client"
2 
3import { useEffect, useId, useRef, useState } from "react"
4import { Button } from "@/components/ui/button"
5import { Input } from "@/components/ui/input"
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/ui/popover"
11import { cn } from "@/lib/utils"
12import { computeCalc, evaluateCalc, parseCalc } from "./calc-editor.helpers"
13import type {
14  CalcFn,
15  CalcString,
16  CalcStringMap,
17  Dimension,
18} from "./calc-editor.types"
19 
20// ---------------------------------------------------------------------------
21// Shared props
22// ---------------------------------------------------------------------------
23 
24export interface CalcEditorPanelProps<
25  TFn extends CalcFn | undefined = undefined,
26> {
27  value: CalcString | (string & {})
28  onChange: (
29    value: TFn extends CalcFn ? CalcStringMap[TFn] : CalcString,
30  ) => void
31  /** Lock the outer function; narrows `onChange` to that flavor. */
32  fn?: TFn
33  /** Viewport width (px) used for the computed-value readout. Default 1280. */
34  referenceViewport?: number
35  className?: string
36  "aria-label"?: string
37}
38 
39export interface CalcEditorProps<TFn extends CalcFn | undefined = undefined>
40  extends CalcEditorPanelProps<TFn> {}
41 
42const ALL_FNS: readonly CalcFn[] = ["calc", "clamp", "min", "max"] as const
43 
44// Seed expression text when switching to / starting on a function.
45function seedFor(fn: CalcFn, inner: string): string {
46  const body = inner.trim() || "1rem"
47  switch (fn) {
48    case "calc":
49      return `calc(${body})`
50    case "clamp":
51      return `clamp(1rem, ${body}, 3rem)`
52    case "min":
53      return `min(${body}, 2rem)`
54    case "max":
55      return `max(${body}, 2rem)`
56  }
57}
58 
59// Pull the "inner" of a calc()/single-arg expression for re-wrapping.
60function innerOf(expr: string): string {
61  const node = parseCalc(expr)
62  if (node && node.kind === "fn" && node.name === "calc") {
63    // re-serialize the single calc arg roughly by stripping the wrapper
64    const m = expr.trim().match(/^calc\((.*)\)$/s)
65    if (m) return m[1].trim()
66  }
67  return expr.trim()
68}
69 
70// ---------------------------------------------------------------------------
71// CalcEditor — popover-wrapped
72// ---------------------------------------------------------------------------
73 
74export function CalcEditor<TFn extends CalcFn | undefined = undefined>(
75  props: CalcEditorProps<TFn>,
76) {
77  const {
78    value,
79    className,
80    "aria-label": ariaLabel = "Edit a CSS math expression",
81  } = props
82// … truncated