"use client"; import * as React from "react"; import { AArrowDownIcon, AArrowUpIcon, HelpCircleIcon, ImageIcon, LoaderIcon, MousePointerClickIcon, PaletteIcon, PencilIcon, SparklesIcon, TypeIcon, UploadIcon, XIcon, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { EmptyState } from "@/components/primitives"; import { useT } from "@/i18n"; import { currentTextSize, setColorClass, stepTextSize } from "@/lib/visual-edit"; import { uploadFileToProject } from "@/lib/upload"; import { cn } from "@/lib/utils"; import type { SelectedElement } from "./use-visual-editor"; import type { VisualChangeKind } from "@/lib/visual-edit"; /** * ═══ THE INSPECTOR (Feature F12) ════════════════════════════════════════════ * * What you can do to the element you picked: its text, its size, its colours, its * image or video, and a question about it for the agent. * * ⚠️ IT NEVER SITS ON TOP OF THE PREVIEW. The brief asks for an inspector that * does not obscure what is being edited, so on desktop it is a COLUMN beside the * frame and on mobile a bottom sheet with the frame above it — never an overlay. An * element you cannot see while you edit it is the one thing a visual editor must not * do. * * ⚠️ COLOURS AND SIZES ARE TAILWIND CLASS EDITS, NOT INLINE STYLES. An inline * style would beat the project's own responsive classes and look broken on a phone, * and it would be unmappable back to source. See `setColorClass` / `stepTextSize`. */ /** Long enough that typing is smooth, short enough that the preview feels live. */ const TEXT_PREVIEW_DEBOUNCE_MS = 220; export interface VisualEditorPanelProps { /** The project the image field uploads into. */ projectId: string; selected: SelectedElement | null; ready: boolean; locked: boolean; /** G4 — the colours this project already uses, harvested from the live page. */ palette: string[]; onChange: (kind: VisualChangeKind, before: string, after: string, options?: { uploaded?: boolean }) => void; onAskAi: (prompt: string) => void; onClose: () => void; } export function VisualEditorPanel({ projectId, selected, ready, locked, palette, onChange, onAskAi, onClose, }: VisualEditorPanelProps) { const t = useT(); const [draftText, setDraftText] = React.useState(""); const [draftSrc, setDraftSrc] = React.useState(""); const [question, setQuestion] = React.useState(""); const signature = selected?.signature; // Reseed when the selection changes — never while the user is typing into it. React.useEffect(() => { setDraftText(signature?.text ?? ""); setDraftSrc(signature?.src ?? ""); setQuestion(""); }, [signature?.breadcrumb, signature?.text, signature?.src]); /** * ⭐ G4 — TEXT PREVIEWS LIVE, DEBOUNCED. * * It used to commit on blur only, so you typed a heading into a box and the page * behind it did not move until you clicked away — which is the opposite of what a * visual editor is for. Every keystroke now pushes to the preview after a short * pause. * * ⚠️ THE DEBOUNCE IS WHAT MAKES IT SAFE, not just cheap. `pushChange` collapses * consecutive edits to the same property of the same element, so typing does not * create thirty entries in the bar — but each push is still a `postMessage` and a * React state update, and firing one per keystroke would make a long heading * stutter. */ const liveTimer = React.useRef | null>(null); React.useEffect(() => () => { if (liveTimer.current) clearTimeout(liveTimer.current); }, []); const previewText = (next: string) => { setDraftText(next); if (!signature?.text) return; if (liveTimer.current) clearTimeout(liveTimer.current); liveTimer.current = setTimeout(() => { // `signature.text` is re-read at fire time: the agent re-describes after // every apply, so the committed `before` always matches what is on screen. if (next !== signature.text) onChange("text", signature.text, next); }, TEXT_PREVIEW_DEBOUNCE_MS); }; const commitText = () => { if (liveTimer.current) clearTimeout(liveTimer.current); if (!signature?.text || draftText === signature.text) return; onChange("text", signature.text, draftText); }; const commitSrc = () => { if (!signature?.src || !draftSrc || draftSrc === signature.src) return; onChange("src", signature.src, draftSrc); }; /** * ⚠️⚠️ A CLASS EDIT ON AN ELEMENT WITH NO CLASS ATTRIBUTE CAN NEVER BE SAVED, and * before this the panel offered it anyway. * * The matcher finds a class edit by searching the source for the attribute value it * started from. With no class attribute that value is the empty string, * `findClassCandidates` returns immediately on an empty needle, and the change comes * back `not-found` with `occurrences: 0` — AFTER the user picked a colour, watched * the preview change, and pressed Apply. The work was always going to be thrown away; * the only honest thing is to say so beforehand. * * ⚠️ THIS IS A REFUSAL, NOT A FIX. Adding a class attribute where none exists means * locating the element's opening tag in the source from its text alone and injecting * an attribute — a real feature, and a riskier one than anything the matcher does * today. Until it exists, the AI box below is the path that works, and the hint * points at it. */ const canEditClasses = !!signature?.className; const stepSize = (direction: 1 | -1) => { if (!signature?.className) return; onChange("class", signature.className, stepTextSize(signature.className, direction)); }; const setColor = (kind: "text" | "bg", hex: string) => { if (!signature?.className) return; onChange("class", signature.className, setColorClass(signature.className, kind, hex)); }; return (