VaultCard

• Layer: Component
• Base: Custom — composes the Icon primitive

The primary card surface for captured documents. The kind is encoded via the mono uppercase label and the icon — never via card hue. A 2px cyan accent strip sits on the left; a 28px icon tile sits in the top-right of roomy cards. Three density variants share the same anatomy: pick the one that fits the surface.

Roomy — dashboard / hero grid

3-column dashboard layout

Compact — vault list

vc-compact equivalent — small kind badge, single-line title, mono meta row

Dense — archive table

4-column dense table — wrap a list of dense cards in a single bordered container

Status indicators

dirty / error / planReady

Props

Prop	Type	Default	Description
typeId	IconKind | string	required	Document type_id. String is allowed for forward-compat; unknown strings fall back to the document Lucide glyph.
title	string	required	Card title.
body	string	—	Optional summary line. Two-line clamp in roomy; ignored in compact and dense.
id	string	—	Short id. Renders in the footer / meta row when present.
timestamp	string	—	Pre-formatted, e.g. "2 days ago".
saltieNote	string	—	Italic accent line replacing the footer-id slot in roomy.
density	"roomy" | "compact" | "dense"	"roomy"	Pick the density that fits the surface.
status	"dirty" | "error"	—	Processing-status dot.
errorMessage	string	—	Tooltip text for the error dot.
planReady	boolean	false	Amber dot indicating a fresh follow-through plan landed.
onClick	() => void	—	Click handler. Adds role="button" and tabIndex={0} when set.

Migrating from the previous VaultCard

The previous VaultCard exposed per-type accent colours and required parent --accent / --accent-rgb overrides. Both are removed. Old call sites of the form

<VaultCard typeId="idea" title="…" timestamp="2h" />

continue to work — the new card simply ignores the previous per-type colour inputs because they no longer exist. To get the body line, pass body (use the cardBody(doc) helper from src/lib/format.ts).