Grid Builder

1"use client"
2 
3import { useEffect, useMemo, 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 { AreasEditor } from "./areas-editor"
12import { MODES } from "./grid-builder.constants"
13import {
14  formatAreas,
15  formatTracks,
16  parseAreas,
17  parseTracks,
18  type TrackToken,
19} from "./grid-builder.helpers"
20import type { GridMode, GridTemplateString } from "./grid-builder.types"
21import { GridPreview } from "./grid-preview"
22import { TrackListEditor } from "./track-list-editor"
23 
24export type { AreasEditorProps, AreasPainterProps } from "./areas-editor"
25// Re-export the sub-component public API so the entry module remains the
26// single import surface (`./grid-builder`) for consumers + tests.
27export { AreasEditor, AreasPainter } from "./areas-editor"
28export type { GridPreviewProps } from "./grid-preview"
29export { GridPreview } from "./grid-preview"
30export type {
31  TrackListEditorProps,
32  TrackTokenRowProps,
33} from "./track-list-editor"
34export { TrackListEditor, TrackTokenRow } from "./track-list-editor"
35 
36// ---------------------------------------------------------------------------
37// Shared props
38// ---------------------------------------------------------------------------
39 
40export interface GridBuilderPanelProps {
41  value: GridTemplateString | (string & {})
42  onChange: (value: GridTemplateString) => void
43  /**
44   * Which template property the editor targets and the live preview renders.
45   * `columns`/`rows` share the track-list grammar; `areas` is the painter.
46   * This selects the active tab + preview target — it does not change
47   * validation. Defaults to `"columns"`.
48   */
49  mode?: GridMode
50  className?: string
51  "aria-label"?: string
52}
53 
54export type GridBuilderProps = GridBuilderPanelProps
55 
56// ---------------------------------------------------------------------------
57// GridBuilder — popover-wrapped
58// ---------------------------------------------------------------------------
59 
60export function GridBuilder(props: GridBuilderProps) {
61  const {
62    value,
63    className,
64    mode = "columns",
65    "aria-label": ariaLabel = "Edit a CSS grid template",
66  } = props
67 
68  return (
69    <Popover>
70      <PopoverTrigger asChild>
71        <Button
72          variant="outline"
73          className={cn("h-9 gap-2 px-3 font-mono", className)}
74          aria-label={ariaLabel}
75        >
76// … truncated