import { X } from "lucide-react";import type { ReactNode } from "react";import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip"; interface PanelTabCloseButtonProps {  children: ReactNode;  label: string;  onClick: () => void;  tooltip?: string;} /** Inside a `group/tab` row, swaps the tab identity for its close action on hover or focus. */export function PanelTabCloseButton({  children,  label,  onClick,  tooltip,}: PanelTabCloseButtonProps) {  const button = (    <button      type="button"      className="cursor-pointer group/close relative flex size-4 shrink-0 items-center justify-center rounded-sm hover:bg-muted"      aria-label={label}      onClick={onClick}    >      <span className="relative flex size-3 items-center justify-center group-hover/tab:hidden group-focus-visible/close:hidden">        {children}      </span>      <X className="hidden size-3 group-hover/tab:block group-focus-visible/close:block" />    </button>  );   if (!tooltip) return button;   return (    <Tooltip>      <TooltipTrigger render={button} />      <TooltipPopup>{tooltip}</TooltipPopup>    </Tooltip>  );}