Function ArtifactCard

packages/react/src/pages/artifacts.tsx:79–164

* One artifact, as a gallery card. * * The whole card is the link — the preview is the biggest, most obvious target, * and a title-only hit area would waste it. The row actions therefore cannot be * nested inside it (a button inside an anchor is invalid, and the click would * navigate through t

(props: {
  readonly artifact: ArtifactSummary;
  readonly onRename: (title: string) => void;
  readonly onRemove: () => void;
})

 * one focus stop, with the actions as their own stops after it.
 */
function ArtifactCard(props: {
  readonly artifact: ArtifactSummary;
  readonly onRename: (title: string) => void;
  readonly onRemove: () => void;
}) {
  const { artifact } = props;
  return (
    <div
      data-slot="artifact-card"
      className="group/artifact-card relative isolate flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-colors duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-within:border-input hover:border-input"
    >
      {/* 16:10 preview, on its own plane, separated by the same hairline the
          rest of the console uses. */}
      <div className="relative aspect-[16/10] overflow-hidden border-b border-border bg-muted/40">
        <ArtifactPreview artifactId={artifact.id} preview={artifact.preview} />
      </div>

      <div className="flex min-w-0 flex-col gap-1 px-4 py-3">
        <h3 className="truncate text-sm font-medium text-foreground">
          <Link
            to="/{-$orgSlug}/artifacts/$artifactId"
            params={{ artifactId: artifact.id }}
            aria-label={`Open artifact ${artifact.title}`}
            className="outline-none after:absolute after:inset-0 after:content-[''] focus-visible:underline"
            onClick={() => trackEvent("artifact_opened", { surface: "list" })}
          >
            {artifact.title}
          </Link>
        </h3>
        {artifact.description ? (
          <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">
            {artifact.description}
          </p>
        ) : null}
        <span className="mt-1 font-mono text-[11px] text-muted-foreground">
          {formatRelativeTime(artifact.updatedAt)}
        </span>
      </div>

      {/* Above the link overlay, so these stay clickable. Revealed on hover or
          focus, and pinned open while their own dialog is. */}
      <div className="absolute right-2 top-2 z-10 flex items-center gap-1 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-hover/artifact-card:opacity-100 has-[[data-state=open]]:opacity-100">
        <RenameArtifactDialog
          currentTitle={artifact.title}
          onRename={props.onRename}
          trigger={
            <Button
              type="button"
              variant="secondary"
              size="xs"
              className="bg-card text-muted-foreground hover:text-foreground"
            >
              Rename
            </Button>
          }
        />
        <AlertDialog>
          <AlertDialogTrigger asChild>