Artifact card

Storybook

What the chat made, in the thread

Artifact card is the tile a reply leaves in the conversation for something too big for a turn: a dashboard, a page, a file. It names the artifact and opens it in an Artifact panel. The card is a toggle button, so the host holds one piece of state, whether the artifact is open, and the card shows which.

A toggle

Press the card to open its artifact and press it again to close. Open, it holds a fill, its cue turns from open to close, and it announces itself as pressed. The card keeps no state of its own: open and onClick are the whole contract.

With its panel

The card and the panel share a title, a meta line and an icon, so the two read as one thing in two places. Here the card and the panel’s own close button drive the same state.

routes.ts

TypeScript
Close the artifact
typescript
export const routes = [
  { name: "Heron Loop", km: 9 },
  { name: "Quarry Rise", km: 14 },
];

Content

The meta line and the icon are optional; without an icon the card draws a document mark. A long title ends in an ellipsis and the card keeps its width. Disabled, it dims and stops taking presses.

tsx
// From the npm package
import { ArtifactCard } from 'rift-ds/components/ArtifactCard/ArtifactCard';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/artifact-card.json