Media / Container Query 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 { FeatureTestRow } from "./feature-test-row"
12import {
13  defaultFeatureTest,
14  parseQueryState,
15  queryToString,
16} from "./query-builder.helpers"
17import type {
18  FeatureTest,
19  QueryMode,
20  QueryState,
21  QueryString,
22} from "./query-builder.types"
23import {
24  AddTestButton,
25  ContainerNameInput,
26  JoinerSelect,
27  LiveString,
28  MediaTypeSelect,
29  NotToggle,
30} from "./query-builder-fields"
31import { QueryPreview } from "./query-preview"
32 
33export type { FeatureTestRowProps } from "./feature-test-row"
34export { FeatureTestRow } from "./feature-test-row"
35export type {
36  ContainerNameInputProps,
37  JoinerSelectProps,
38  MediaTypeSelectProps,
39  NotToggleProps,
40} from "./query-builder-fields"
41// Re-export the public sub-components + their prop types so consumers (and the
42// barrel) can keep importing them from `./query-builder` after the split.
43export {
44  ContainerNameInput,
45  JoinerSelect,
46  MediaTypeSelect,
47  NotToggle,
48} from "./query-builder-fields"
49export type { QueryPreviewProps } from "./query-preview"
50export { QueryPreview } from "./query-preview"
51 
52// ---------------------------------------------------------------------------
53// Props
54// ---------------------------------------------------------------------------
55 
56export interface QueryBuilderPanelProps {
57  value: QueryString | (string & {})
58  onChange: (value: QueryString) => void
59  /** `"media"` (default) edits a media query; `"container"` a container query. */
60  mode?: QueryMode
61  className?: string
62  "aria-label"?: string
63}
64 
65export interface QueryBuilderProps extends QueryBuilderPanelProps {}
66 
67// ---------------------------------------------------------------------------
68// QueryBuilder — popover-wrapped
69// ---------------------------------------------------------------------------
70 
71export function QueryBuilder(props: QueryBuilderProps) {
72  const {
73    value,
74    mode = "media",
75    className,
76    "aria-label": ariaLabel = "Edit a CSS media or container query",
77  } = props
78 
79  return (
80    <Popover>
81      <PopoverTrigger asChild>
82        <Button
83          variant="outline"
84          className={cn("h-9 gap-2 px-3 font-mono", className)}
85          aria-label={ariaLabel}
86        >
87          <span className="text-[10px] text-muted-foreground uppercase">
88            {mode}
89// … truncated