import {  CardStack,  CardStackContent,  CardStackEntry,  CardStackEntryContent,  CardStackEntryDescription,  CardStackEntryField,  CardStackEntryTitle,} from "@executor-js/react/components/card-stack";import {  FreeformCombobox,  type FreeformComboboxOption,} from "@executor-js/react/components/combobox";import { Input } from "@executor-js/react/components/input";import { IntegrationFavicon } from "@executor-js/react/components/integration-favicon";import {  IntegrationIdentityFieldRows,  type IntegrationIdentity,} from "@executor-js/react/plugins/integration-identity"; export function OpenApiSourceDetailsFields(props: {  readonly title: string;  readonly description?: string;  readonly identity: IntegrationIdentity;  readonly baseUrl: string;  readonly onBaseUrlChange: (value: string) => void;  readonly baseUrlOptions?: readonly FreeformComboboxOption[];  readonly specUrl?: string;  readonly onSpecUrlChange?: (value: string) => void;  readonly faviconIcon?: string | null;  readonly faviconUrl?: string;  readonly namespaceReadOnly?: boolean;  readonly specUrlDisabled?: boolean;  readonly saveState?: "idle" | "saving" | "saved";  readonly baseUrlMissingMessage?: string;  readonly footer?: string;}) {  const baseUrlOptions = props.baseUrlOptions ?? [];   return (    <CardStack>      <CardStackContent className="border-t-0">        <CardStackEntry>          {(props.faviconIcon || props.faviconUrl) && (            <IntegrationFavicon icon={props.faviconIcon} url={props.faviconUrl} size={16} />          )}          <CardStackEntryContent>            <CardStackEntryTitle>{props.title}</CardStackEntryTitle>            {props.description && (              <CardStackEntryDescription>{props.description}</CardStackEntryDescription>            )}          </CardStackEntryContent>          {props.saveState && props.saveState !== "idle" && (            <span className="text-xs text-muted-foreground">              {props.saveState === "saving" ? "Saving…" : "Saved"}            </span>          )}        </CardStackEntry>        <IntegrationIdentityFieldRows          identity={props.identity}          namespaceReadOnly={props.namespaceReadOnly}        />        <div className="grid grid-cols-1 md:grid-cols-2">          <CardStackEntryField label="Base URL">            {baseUrlOptions.length > 0 ? (              <FreeformCombobox                value={props.baseUrl}                onValueChange={props.onBaseUrlChange}                options={baseUrlOptions}                placeholder="https://api.example.com"                className="w-full"                inputClassName="font-mono text-sm"              />            ) : (              <Input                value={props.baseUrl}                onChange={(e) => props.onBaseUrlChange((e.target as HTMLInputElement).value)}                placeholder="https://api.example.com"                className="font-mono text-sm"              />            )}             {props.baseUrlMissingMessage && !props.baseUrl && (              <p className="text-[11px] text-amber-600 dark:text-amber-400">                {props.baseUrlMissingMessage}              </p>            )}          </CardStackEntryField>          {props.specUrl !== undefined && props.onSpecUrlChange && (            <CardStackEntryField label="Spec URL">              <Input                value={props.specUrl}                onChange={(e) => props.onSpecUrlChange?.((e.target as HTMLInputElement).value)}                placeholder="https://api.example.com/openapi.json"                className="font-mono text-sm"                disabled={props.specUrlDisabled}              />            </CardStackEntryField>          )}        </div>        {props.footer && (          <CardStackEntry>            <CardStackEntryContent>              <CardStackEntryTitle>{props.footer}</CardStackEntryTitle>            </CardStackEntryContent>          </CardStackEntry>        )}      </CardStackContent>    </CardStack>  );}