ui-components

name	ui-components
description	Maps UI needs to simple-books primitives in src/components/ui and related layout components. Use when building pages, forms, tables, badges, or styling new features.

UI components

All primitives live in src/components/ui/index.tsx. No external UI library.

When to reach for what

Need	Use
Page title + subtitle + actions	<PageHeader> (stacks on compact)
Mobile list instead of wide table	Card rows with md:hidden / hidden md:block
Side-by-side fields on compact	<FormGrid> from ~/components/form-grid
Form submit row on compact	<FormActions> from ~/components/form-actions
Invoice line editor	<InvoiceLineEditor> from ~/components/invoice-line-editor
Bordered container with header	<Card> + <CardHeader> + <CardBody>
Form input	<Input>, wrapped in <Field>
Multi-line text	<Textarea> inside <Field>
Picker	<Select> (styled native)
Currency in a cell	<Money cents={…} tone="…" />
Status pill	`<Badge tone="positive
Table	<Table> + <THead> + <Th> + <Tr> + <Td>
Empty state	<EmptyState title hint action>
Inline SVG icon	<Icon d="..." size={…} />
Modal	<ModalDialog title onClose> (exported from routes/_app/services.tsx)

Tone rules

• Numbers: always Money or a tabular-classed span.
• Status: always Badge, never inline color text.
• Headings: PageHeader for the top; <h3> 14–15px for card titles.
• Body: 13–14px default, ink-soft (text-[var(--color-ink-soft)]) for prose.
• Color: brand for primary action; restrained accents. Use --color-ink* tokens.
• Density: generous whitespace; calm, not packed.

Layout convention

• Each _app/... route renders inside <main> capped at 1200px wide.
• Page = <PageHeader /> then content blocks (cards, tables).
• Forms: labels above inputs; submits in a right-aligned footer.

Breakpoints and shell: responsive-layout.