Patterns.

The authenticated-app frame: sidebar + topbar + content slot. Permission-driven nav, responsive dropdown↔sheet swap, global dialog mount point. Every signed-in route uses this.

Brand visual on one side, form on the other. Used for login, signup, password reset, 2FA challenge. Same shell across every unauthenticated state.

Section title + lede + tab strip + content. Reused inside settings, transactions, bill pay, anywhere a section needs internal navigation without leaving the protected shell.

The canonical Dash.fi data screen — search, facet filters, paginated table. Drop-in for cards, statements, ad spend, vendors.

A single headline number with a delta. The atom of every dashboard hero, KYC overview, statement summary.

Page-level pattern: tabs that double as data counters. "All (124) · Pending (3) · Settled (121)." Counts react to filters. The single most-replicated page shape inside the product.

Header + filters + table + row actions + bulk-action bar. The default shape for any "list of work items" route (invoices, disputes, reconciliations).

Metric tiles row + recent activity + quick actions. The home of every authenticated section — overview before drill-in.

The sticky selection toolbar that appears once ≥1 row is checked. Count + clear on the left, an async BulkRunner-driven action group on the right, a busy/progress state that disables the group and reports a toast when the run finishes.

Grid↔list toggle over a set of issued cards, with a cardholder combobox facet, status chips, and per-card freeze/edit/duplicate/archive actions. The overview shape for any "collection of visual objects" surface.

Today / Yesterday / This week / This month / Older grouping over a flat notification feed, with a date-range Select filter and click-to-mark-read. The canonical shape for any chronological, groupable feed.

Year pager over monthly statement rows, each opening a preview modal (PDF/CSV export). The shape for any "archive of periodic documents" surface — statements, tax forms, annual reports.

A grouped block of form controls inside a long settings page. Label · description · control · inline help.

Page-level: stacked Settings-section blocks with anchor side nav. Used for business profile, account, security, notifications.

Linear stepper with persistent state, back/next controls, per-step validation, and a review step before submit. The apply flow uses this; KYC/KYB uses this.

A stepper that lives entirely inside one Dialog — a `steps` array of `{ component, props }`, current index in local state, direction-aware `fly` transition on step change. Used for add-funds, wire details, and other modal-scoped multi-step flows that don't warrant their own route.

Template → upload → map columns → process, in one Dialog with a left step-rail. Drag-and-drop or click-to-browse CSV upload, auto-detected column mapping against required fields, a LinearLoader-driven processing state, and a "keep working" escape hatch so the import runs in the background.

Master-detail: role list on the left, a permission checkbox grid on the right, collapsing to a Select-driven single-column view on mobile. For any many-roles × many-capabilities admin surface.

Two-step gate for irreversible actions — close card, revoke virtual, terminate user. AlertDialog with a single destructive primary.

Reveal-once semantics for API keys and webhook secrets — a Dialog that opens already showing the value, with an explicit "won't be shown again" warning and a copy-to-clipboard field. There is no re-open; the value must be regenerated to be seen twice.

What the surface looks like before there is data. Centered, opinionated, ends with a single primary CTA.

Success / failure / blocked end-of-flow screen. Single message, single CTA (or two — primary + secondary). Used at the end of apply, after dispute submission, on hard-block compliance fails.

Two-column issued-card summary. Status pill, limit progress, controls on the right. Pattern for any "thing" detail page.

Enable/disable rows for a set of offerable products, each with an off-ramp confirmation dialog and an expandable pricing table. For admin surfaces that toggle product availability rather than edit records.

SvelteKit route groups encode auth state — `(auth)` / `(protected)` / `(onboarding)` / `(protected)/(2fa)`. The folder structure IS the contract for "can this user be here?"

Dialogs and sheets whose open/closed state lives in the URL via `replaceState`. Shareable, back-button-correct, refresh-survivable. Used for transaction detail, card detail, edit drawers.