Filter 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 type { FilterMode } from "./filter-builder.constants"
12import {
13  defaultItem,
14  formatFilter,
15  parseFilter,
16} from "./filter-builder.helpers"
17import type {
18  FilterFunctionName,
19  FilterItem,
20  FilterString,
21} from "./filter-builder.types"
22import { FilterPreview } from "./filter-preview"
23import { FilterFunctionRow, FunctionOptions } from "./filter-row"
24 
25// Re-export the extracted sub-components + their prop types so the public
26// entry surface (and existing deep imports) is unchanged by the file split.
27export type { FilterPreviewProps } from "./filter-preview"
28export { FilterPreview } from "./filter-preview"
29export type {
30  FilterArgEditorProps,
31  FilterFunctionRowProps,
32} from "./filter-row"
33export { FilterArgEditor, FilterFunctionRow } from "./filter-row"
34 
35// ---------------------------------------------------------------------------
36// Shared props
37// ---------------------------------------------------------------------------
38 
39export interface FilterBuilderPanelProps {
40  value: FilterString | (string & {})
41  onChange: (value: FilterString) => void
42  /**
43   * Which CSS property the live preview targets. Both `filter` and
44   * `backdrop-filter` share the identical function-list grammar, so this does
45   * not change validation or narrow the `onChange` output — it only drives the
46   * preview render target + labels. Defaults to `"filter"`.
47   */
48  mode?: FilterMode
49  className?: string
50  "aria-label"?: string
51}
52 
53export interface FilterBuilderProps extends FilterBuilderPanelProps {}
54 
55// ---------------------------------------------------------------------------
56// FilterBuilder — popover-wrapped
57// ---------------------------------------------------------------------------
58 
59export function FilterBuilder(props: FilterBuilderProps) {
60  const {
61    value,
62    className,
63    "aria-label": ariaLabel = "Edit a CSS filter",
64  } = props
65  const items = parseFilter(String(value)) ?? []
66 
67  return (
68    <Popover>
69      <PopoverTrigger asChild>
70        <Button
71          variant="outline"
72          className={cn("h-9 gap-2 px-3 font-mono", className)}
73          aria-label={ariaLabel}
74        >
75          <span aria-hidden="true" className="text-foreground/60">
76            ✦
77          </span>
78// … truncated