Equity recipe
Rendered
Goal
When a founder, board secretary, or counsel opens the equity dashboard, they need (1) current ownership at a glance, (2) the share-class breakdown (authorized / issued / reserved), (3) recent grants and their state, and (4) any in-flight grants needing approval. The equity recipe gives them all of this in one screen, with the live donut at the top, the share-class capacity gauge below, and the grants table at the bottom.
Layout breakdown
Three vertical sections inside the authenticated dashboard shell. Region map:
┌─ AppBreadcrumb ──────────────────────────────────────────────────┐
│ Entities › Waypoint Holdings › Equity │
├─ Section: Hero ───────────────────────────────────────────────────┤
│ Eyebrow: EQUITY │
│ DisplayHeading: Cap table, Q3 2026 │
│ SlidingPill: [Now] [Round-modeled] [Historic] │
├─ Section: Snapshot (2 columns) ───────────────────────────────────┤
│ ┌── CapTableSnapshotCard (8/12) ──┐ ┌── Capacity gauge (4/12) ──┐ │
│ │ Live donut + holder list │ │ Authorized: 10,000,000 │ │
│ │ │ │ Issued: 7,847,210 │ │
│ │ │ │ Reserved: 980,400 │ │
│ │ │ │ Available: 1,172,390 │ │
│ └──────────────────────────────────┘ └────────────────────────────┘ │
├─ Section: Share classes (table) ──────────────────────────────────┤
│ Card: Share class breakdown │
│ | Class | Authorized | Issued | Reserved | Available | │
│ | Common | 6,000,000 | … | … | … | │
│ | Pref Series A | 3,000,000 | … | … | … | │
│ | Option Pool | 1,000,000 | … | … | … | │
├─ Section: Pending + Recent ───────────────────────────────────────┤
│ ┌── Pending grants (one OptionGrantCard per draft) ──┐ ┌── Feed ──┐│
│ │ <OptionGrantCard> for each draft grant │ │ Timeline.* │
│ │ │ │ filtered │
│ └─────────────────────────────────────────────────────┘ └──────────┘│
└────────────────────────────────────────────────────────────────────┘Every value cell uses var(--font-geist-mono) + font-variant-numeric: tabular-nums so columns line up across rows.
Component manifest
| Region | Component | Why over alternatives |
|---|---|---|
| Breadcrumb | AppBreadcrumb | Entity → Equity context |
| Hero eyebrow | Eyebrow | Section anchor |
| Hero heading | DisplayHeading as="h1" size="hero" | Page-outline top |
| View-mode switch | SlidingPill size="md" | Three views (Now / Round-modeled / Historic); the indicator slide reads as "same surface, different lens" |
| Cap-table snapshot | CapTableSnapshotCard | The canonical live ownership view |
| Capacity gauge | Card + tabular-num value rows | Plain card; values right-aligned with tabular-nums |
| Share-class table | Card + HTML <table> | The canonical table treatment; mono + tabular numerals |
| Pending grants | OptionGrantCard | One per draft grant; the canonical drafted-grant surface |
| Activity feed | Timeline.* (Timeline) | Equity-scoped event stream |
Responsive behaviour
| Breakpoint | Snapshot | Pending + Feed |
|---|---|---|
< 768px | Single column (donut above gauge) | Single column (pending grants above feed) |
768–1023px | Single column with wider cards | Same |
≥ 1024px | Two columns (8/12 + 4/12) | Two columns (8/12 + 4/12) |
States
| State | Trigger | Behaviour |
|---|---|---|
| Default | Page load | All cards hydrate; "Now" view active |
| Round-modeling | SlidingPill switches to Round-modeled | Donut shows projected ownership; capacity gauge shifts to "post-round" numbers; banner identifies the round |
| Historic | SlidingPill switches to Historic | Donut shows ownership at a chosen past date; date picker appears in hero |
| Empty (no grants yet) | No Grant rows | Pending region hidden; cap table shows founder-only ownership |
| Loading | First nav | CardSkeleton placeholders in each card; AppBreadcrumb hydrates first |
Implementation
Source: apps/app/app/(authenticated)/entities/[id]/equity/page.tsx. Server component; CapTable view fetched server-side via @matter/api-client. Round-modeled view runs the modeling math in a server action triggered by the SlidingPill change.
Source
apps/app/app/(authenticated)/entities/[id]/equity/page.tsxBoard meeting
Full-screen board-meeting surface — agenda, attendance, action items, materials, pending consents. The canonical board-composer layout in apps/app/(authenticated)/entities/[id]/board/.
API reference
Full-bleed API-reference layout — topbar, sidebar nav, breadcrumb + eyebrow, operation detail on the left, embedded Scalar playground on the right. The canonical surface for every endpoint in apps/docs.