import { useState } from "react";import { ChevronDown } from "lucide-react"; import { cn } from "@executor-js/react/lib/utils";import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@executor-js/react/components/collapsible";import { FieldLabel } from "@executor-js/react/components/field";import { Textarea } from "@executor-js/react/components/textarea"; import { parseSpecOverridesText } from "../sdk/spec-overrides"; export function SpecOverridesEditor(props: {  readonly value: string;  readonly onChange: (value: string) => void;  readonly disabled?: boolean;}) {  const [open, setOpen] = useState(props.value.trim().length > 0);  const parsed = parseSpecOverridesText(props.value);   return (    <Collapsible open={open} onOpenChange={setOpen}>      <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground">        Spec overrides        <ChevronDown          className={cn("size-3.5 transition-transform", open && "rotate-180")}          aria-hidden="true"        />      </CollapsibleTrigger>      <CollapsibleContent>        <div className="mt-3 space-y-2">          <FieldLabel>JSON Patch (RFC 6902)</FieldLabel>          <Textarea            value={props.value}            onChange={(event) => props.onChange((event.target as HTMLTextAreaElement).value)}            placeholder={'[{"op":"replace","path":"/info/title","value":"My API"}]'}            rows={5}            maxRows={14}            className="font-mono text-xs"            disabled={props.disabled}            aria-invalid={!parsed.ok}          />          {!parsed.ok && <p className="text-xs text-destructive">{parsed.message}</p>}        </div>      </CollapsibleContent>    </Collapsible>  );}