Clip Path 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 type { ClipMode } from "./clip-path-editor.constants"
12import {
13  defaultShape,
14  formatClipPath,
15  parseClipPath,
16  shapeToCss,
17} from "./clip-path-editor.helpers"
18import type {
19  BasicShapeName,
20  ClipPathShapeState,
21  ClipPathState,
22  ClipPathString,
23  GeometryBox,
24} from "./clip-path-editor.types"
25import { ShapeControls } from "./controls/shape-controls"
26import { ClipPathPreview } from "./preview/clip-path-preview"
27import { GeometryBoxSelect } from "./primitives/geometry-box-select"
28import { LiveString } from "./primitives/live-string"
29import { ShapeSelect } from "./primitives/shape-select"
30 
31// ---------------------------------------------------------------------------
32// Shared props
33// ---------------------------------------------------------------------------
34 
35export interface ClipPathEditorPanelProps {
36  value: ClipPathString | (string & {})
37  onChange: (value: ClipPathString) => void
38  /**
39   * Which CSS property the live preview targets. Both `clip-path` and
40   * `shape-outside` share the identical basic-shape grammar, so this does NOT
41   * change validation or narrow the `onChange` output — it only drives the
42   * preview render target + labels. Defaults to `"clip-path"`.
43   */
44  mode?: ClipMode
45  className?: string
46  "aria-label"?: string
47}
48 
49export interface ClipPathEditorProps extends ClipPathEditorPanelProps {}
50 
51// ---------------------------------------------------------------------------
52// ClipPathEditor — popover-wrapped
53// ---------------------------------------------------------------------------
54 
55export function ClipPathEditor(props: ClipPathEditorProps) {
56  const {
57    value,
58    className,
59    "aria-label": ariaLabel = "Edit a clip-path",
60  } = props
61  const state = parseClipPath(String(value))
62  const label =
63    state === null
64      ? "invalid"
65      : state.shape === null
66        ? (state.box ?? "none")
67        : state.shape.shape
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// … truncated