Shape 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 { CommandRow } from "./command-row"
12import { ShapeCanvas } from "./shape-canvas"
13import {
14  defaultShape,
15  formatShape,
16  parseShape,
17} from "./shape-path-editor.helpers"
18import type {
19  ShapeCommand,
20  ShapeString,
21  ShapeValue,
22} from "./shape-path-editor.types"
23import { ShapePreview } from "./shape-preview"
24 
25// Re-export the public sub-components + their prop types so consumers (and the
26// barrel) can import them from `./shape-path-editor`.
27export type { CommandRowProps } from "./command-row"
28export { CommandRow } from "./command-row"
29export type { MiniSelectProps } from "./mini-select"
30export { MiniSelect } from "./mini-select"
31export type { ShapeCanvasProps } from "./shape-canvas"
32export { ShapeCanvas } from "./shape-canvas"
33export type { ShapePreviewMode, ShapePreviewProps } from "./shape-preview"
34export { ShapePreview } from "./shape-preview"
35 
36// ---------------------------------------------------------------------------
37// Shared props
38// ---------------------------------------------------------------------------
39 
40export type ShapePathEditorMode = "clip-path" | "offset-path"
41 
42export interface ShapePathEditorPanelProps {
43  value: ShapeString | (string & {})
44  onChange: (value: ShapeString) => void
45  /**
46   * Which CSS property the live preview targets. Both `clip-path` and
47   * `offset-path` share the identical `shape()` grammar, so this does NOT
48   * change validation or narrow the `onChange` output — it only drives the
49   * preview render. Defaults to `"clip-path"`.
50   */
51  mode?: ShapePathEditorMode
52  className?: string
53  "aria-label"?: string
54}
55 
56export interface ShapePathEditorProps extends ShapePathEditorPanelProps {}
57 
58// ---------------------------------------------------------------------------
59// ShapePathEditor — popover-wrapped
60// ---------------------------------------------------------------------------
61 
62export function ShapePathEditor(props: ShapePathEditorProps) {
63  const {
64    value,
65    className,
66    "aria-label": ariaLabel = "Edit a shape() path",
67  } = props
68  const parsed = parseShape(String(value))
69  const label =
70    parsed.error !== null
71      ? "invalid"
72      : `${parsed.commands.length} cmd${parsed.commands.length === 1 ? "" : "s"}`
73 
74  return (
75    <Popover>
76// … truncated