47204dee67
The local cn() joined classes with filter(Boolean).join(' '), which doesn't
dedupe conflicting Tailwind utilities — consumer className overrides could
silently lose to the component's base classes. Switch to the standard
twMerge(clsx(...)) (clsx + tailwind-merge are already app deps). Behaviour is
unchanged except conflicting overrides now win correctly. Build-verified
(skyai-finance clean; vibespace transforms all modules). Frontend audit rank 4.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@crema/records-ui
Personal-records primitives for the personal cloud's Records surface
(arcadia-personal-cloud docs/RECORDS.md): kind-typed record cards, group
sections with privacy framing, field tables and spec-driven field inputs,
tier badges, the record→Markdown renderer, and a TD3 passport MRZ parser.
This lib ships shapes and pure logic, not data fetching. The app owns the API client, the passkey doc-vault crypto, and flow orchestration; this lib renders records and parses/renders their field structures.
Public API
import {
RecordCard, RecordGroupSection, TierBadge, RecordKindIcon,
FieldTable, FieldInputs, KeyValueEditor, RecordsEmpty,
renderRecordMd, parseMrzTd3,
type RecordKindInfo, type FieldSpec, type RecordTier,
} from "@crema/records-ui"
// Group section with the locked-group privacy framing
<RecordGroupSection label="Identity" locked>
<RecordCard record={summary} icon="passport" onClick={open} />
</RecordGroupSection>
// Read view of fields (registry order, blanks skipped)
<FieldTable fields={kind.fields} data={record.data} />
// Spec-driven add/edit inputs; KeyValueEditor for free-form `other`
<FieldInputs fields={kind.fields} values={draft} onChange={set} />
// The Markdown the assistant consumes (mirror of the server renderer)
const md = renderRecordMd("Passport", "My passport", kind.fields, data)
// Fully-local passport MRZ parse (two 44-char lines, check digits verified)
const mrz = parseMrzTd3(pastedText)
Field specs come from the backend registry (GET /me/records/kinds) —
this lib defines the types and rendering, never the vocabulary.
Token-themed throughout (bg-card, text-muted-foreground, --primary);
no hex values. lucide-react is the only dependency (a Crema shared dep —
consumers alias it to their installed copy).