From 45ca8fbbc3de854e05d24370800d65d59495ffd9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 14 Aug 2026 18:37:27 +0000
Subject: [PATCH] Rebuild landing previews from the real app screens.

The marketing shots were a separate miniature UI. They now compose the same
shell, panels, metrics, charts, and ledger as the signed-in app, so the
landing page shows those screens as they actually look.

Co-authored-by: danielxu0307 <danielxu0307@gmail.com>
---
 src/components/landing/landing.css |  719 +-----------
 src/components/landing/mocks.tsx   | 1672 ++++++++++++++++++++--------
 2 files changed, 1260 insertions(+), 1131 deletions(-)

diff --git a/src/components/landing/landing.css b/src/components/landing/landing.css
index 151e69d..92183d8 100644
--- a/src/components/landing/landing.css
+++ b/src/components/landing/landing.css
@@ -378,13 +378,8 @@
   pointer-events: none;
 }
 
-.lp-app {
-  --accent: var(--lagoon-deep);
-  --accent-soft: color-mix(in oklab, var(--lagoon) 18%, var(--foam));
-  --line: rgba(28, 25, 23, 0.1);
-  --line-soft: rgba(28, 25, 23, 0.06);
-  display: grid;
-  grid-template-columns: 148px minmax(0, 1fr);
+.lp-app,
+.lp-m {
   border: 1px solid var(--border);
   border-radius: 12px 12px 0 0;
   background: var(--background);
@@ -392,298 +387,93 @@
     0 1px 0 var(--inset-glint) inset,
     0 30px 60px rgba(28, 25, 23, 0.13);
   overflow: hidden;
-  font-size: 12px;
   text-align: left;
-  animation: lp-rise 700ms var(--e) both;
+  color: var(--foreground);
+  pointer-events: none;
 }
 
-/* On a phone the mock's sidebar would eat half the frame, so the replica drops
-   to its main column. */
-@media (width < 48rem) {
-  .lp-app {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .lp-app-side {
-    display: none;
-  }
+.lp-app {
+  animation: lp-rise 700ms var(--e) both;
+}
 
-  .lp-app-figure {
-    font-size: 24px;
-  }
+.lp-m {
+  border-radius: 11px 11px 0 0;
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 22px 44px rgba(28, 25, 23, 0.14);
+}
 
+@media (width < 48rem) {
   .lp-stage {
     padding: 20px 20px 0;
   }
-}
-
-.lp-app-side {
-  padding: 14px 10px;
-  border-right: 1px solid var(--line-soft);
-  background: var(--foam);
-}
-
-.lp-app-brand {
-  padding: 0 8px 14px;
-  font-family: 'Instrument Sans', sans-serif;
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  color: var(--sea-ink);
-}
-
-.lp-app-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.lp-app-nav span {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: 6px;
-  color: var(--muted-foreground);
-  font-size: 11.5px;
-  font-weight: 500;
-}
-
-.lp-app-nav span[data-active='true'] {
-  background: rgba(28, 25, 23, 0.07);
-  color: var(--sea-ink);
-}
-
-.lp-app-nav i {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: currentColor;
-  opacity: 0.4;
-}
-
-.lp-app-main {
-  padding: 16px 18px 22px;
-  min-width: 0;
-}
-
-.lp-app-hero {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 14px;
-  padding-bottom: 16px;
-}
-
-.lp-app-kicker {
-  font-size: 9.5px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--muted-foreground);
-}
-
-.lp-app-figure {
-  margin-top: 4px;
-  font-size: 30px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: -0.035em;
-  font-variant-numeric: tabular-nums;
-  color: var(--sea-ink);
-}
 
-.lp-app-delta {
-  margin-top: 6px;
-  font-size: 11px;
-  color: var(--palm);
-}
-
-.lp-spark {
-  width: 190px;
-  height: 52px;
-}
-
-.lp-spark path {
-  fill: none;
-  stroke: var(--accent);
-  stroke-width: 1.6;
-  stroke-linecap: round;
-  stroke-dasharray: 320;
-  stroke-dashoffset: 320;
-  animation: lp-draw 1.5s var(--e) 250ms both;
-}
-
-.lp-app-panels {
-  display: grid;
-  gap: 10px;
-}
-
-@media (width >= 40rem) {
-  .lp-app-panels {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
+  .lp-app .lp-preview-side {
+    display: none;
   }
 }
 
-.lp-app-col {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-width: 0;
-}
-
-.lp-app-panel {
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  background: var(--card);
-  overflow: hidden;
-}
-
-.lp-app-panel-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 10px;
-  border-bottom: 1px solid rgba(28, 25, 23, 0.07);
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--sea-ink);
-}
-
-.lp-app-panel-head em {
-  font-style: normal;
-  font-weight: 500;
-  color: var(--muted-foreground);
-}
-
-.lp-app-panel-body {
-  padding: 10px;
-}
-
-.lp-pace {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  font-size: 11px;
-  color: var(--muted-foreground);
+/* The shot is the real app chrome, isolated so landing type and gutters
+   cannot leak in. Container queries size the dashboard split to the frame,
+   not the window. */
+.lp-preview {
+  --page-gutter: 1rem;
+  --tabbar-height: 0px;
+  --app-header-height: 3rem;
+  container-type: inline-size;
+  container-name: lp-preview;
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 16px;
+  line-height: 1.5;
 }
 
-.lp-pace b {
-  font-size: 17px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  color: var(--sea-ink);
-  font-variant-numeric: tabular-nums;
+.lp-m .lp-preview {
+  --page-gutter: 0.75rem;
 }
 
-.lp-pace-track {
+.lp-preview .app-shell-header {
   position: relative;
-  margin-top: 8px;
-  height: 7px;
-  border-radius: 999px;
-  background: rgba(28, 25, 23, 0.08);
-  overflow: hidden;
-}
-
-.lp-pace-track i {
-  display: block;
-  width: 0;
-  height: 100%;
-  border-radius: 999px;
-  background: var(--accent);
-  animation: lp-fill 1.1s var(--e) 420ms both;
-}
-
-.lp-donut-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+  top: auto;
 }
 
-.lp-donut {
-  flex: 0 0 auto;
-  width: 66px;
-  height: 66px;
-  border-radius: 999px;
-  background: conic-gradient(
-    var(--chart-1) 0 34%,
-    var(--chart-2) 34% 58%,
-    var(--chart-3) 58% 76%,
-    var(--chart-5) 76% 89%,
-    color-mix(in oklab, var(--sea-ink) 14%, transparent) 89% 100%
-  );
-  mask: radial-gradient(circle, transparent 56%, #000 57%);
+.lp-preview .app-shell-main {
+  padding-bottom: 1.5rem;
 }
 
-.lp-legend {
+.lp-preview-shell {
   display: flex;
-  flex-direction: column;
-  gap: 5px;
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.lp-legend div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 11px;
-  color: var(--sea-ink-soft);
-}
-
-.lp-legend b {
-  font-weight: 500;
-  color: var(--sea-ink);
-  font-variant-numeric: tabular-nums;
-}
-
-.lp-legend i {
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: var(--c);
-  margin-right: 6px;
+  min-height: 560px;
+  background: var(--background);
 }
 
-.lp-legend span {
+.lp-preview-side {
+  position: relative;
   display: flex;
-  align-items: center;
+  width: 212px;
   min-width: 0;
-}
-
-.lp-txns {
-  display: flex;
+  flex-shrink: 0;
   flex-direction: column;
+  overflow: hidden;
+  background: var(--background);
 }
 
-.lp-txn {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 7px 10px;
-  border-bottom: 1px solid rgba(28, 25, 23, 0.06);
-  font-size: 11.5px;
-}
-
-.lp-txn:last-child {
-  border-bottom: 0;
+.lp-preview-split {
+  display: grid;
+  gap: 0.75rem;
 }
 
-.lp-txn-cat {
-  padding: 2px 7px;
-  border-radius: 999px;
-  background: rgba(28, 25, 23, 0.06);
-  font-size: 10px;
-  color: var(--muted-foreground);
+@container lp-preview (min-width: 40rem) {
+  .lp-preview-split {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    gap: 1rem;
+  }
 }
 
-.lp-txn-amt {
-  font-variant-numeric: tabular-nums;
-  color: var(--sea-ink);
+@container lp-preview (max-width: 28rem) {
+  .lp-preview-debt-share {
+    display: none;
+  }
 }
 
 /* A few degrees of tilt reads as a product shot rather than a screenshot pasted
@@ -700,21 +490,6 @@
   }
 }
 
-@keyframes lp-draw {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes lp-fill {
-  from {
-    width: 0;
-  }
-  to {
-    width: var(--w, 62%);
-  }
-}
-
 /* Section furniture ── */
 .lp-section {
   padding-block: 88px 96px;
@@ -884,34 +659,10 @@
   pointer-events: none;
 }
 
-/* A phone has about 290px inside the frame. Rather than squeeze the desktop
-   replica into it — which turned merchant names into two-letter stubs — the
-   replicas shed their middle column and show the shape the app actually takes
-   on a phone: the name leads, the amount closes. */
 @media (width < 48rem) {
   .lp-feature-visual {
     padding: 20px 20px 0;
   }
-
-  .lp-m-next,
-  .lp-m-note,
-  .lp-m-mini {
-    display: none;
-  }
-
-  .lp-m-rec .lp-m-name {
-    flex-wrap: wrap;
-    gap: 2px 7px;
-  }
-
-  .lp-m-learn-row {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .lp-m-learn-row em {
-    flex-basis: 100%;
-  }
 }
 
 .lp-feature-visual[data-tone='mint'] {
@@ -994,360 +745,6 @@
     linear-gradient(160deg, #d8e8e2, var(--sand));
 }
 
-/* Screen replicas inside the frames ── */
-.lp-m {
-  --accent: var(--lagoon-deep);
-  --accent-soft: color-mix(in oklab, var(--lagoon) 18%, var(--foam));
-  --line: rgba(28, 25, 23, 0.1);
-  --line-soft: rgba(28, 25, 23, 0.06);
-  position: relative;
-  border: 1px solid var(--border);
-  border-radius: 11px 11px 0 0;
-  background: var(--card);
-  box-shadow:
-    0 1px 0 var(--inset-glint) inset,
-    0 22px 44px rgba(28, 25, 23, 0.14);
-  overflow: hidden;
-  font-size: 12px;
-  text-align: left;
-  color: var(--sea-ink);
-}
-
-.lp-m-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 9px 12px;
-  border-bottom: 1px solid rgba(28, 25, 23, 0.08);
-  font-size: 11.5px;
-  font-weight: 600;
-}
-
-.lp-m-head em {
-  font-style: normal;
-  font-weight: 500;
-  color: var(--muted-foreground);
-}
-
-.lp-m-body {
-  padding: 12px;
-}
-
-.lp-m-groups,
-.lp-m-rows {
-  display: flex;
-  flex-direction: column;
-}
-
-.lp-m-group {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 9px 12px 5px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 9.5px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--muted-foreground);
-}
-
-.lp-m-group b {
-  font-weight: 500;
-  color: var(--sea-ink-soft);
-  font-variant-numeric: tabular-nums;
-}
-
-.lp-m-row,
-.lp-m-rec,
-.lp-m-cat,
-.lp-m-fix {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding: 8px 12px;
-  border-top: 1px solid rgba(28, 25, 23, 0.055);
-  font-size: 11.5px;
-}
-
-.lp-m-inst {
-  display: grid;
-  place-items: center;
-  flex: 0 0 auto;
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  background: color-mix(in oklab, var(--lagoon) 14%, transparent);
-  color: var(--lagoon-deep);
-  font-size: 9.5px;
-  font-style: normal;
-  font-weight: 600;
-}
-
-.lp-m-name {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.lp-m-name em {
-  font-style: normal;
-  color: var(--muted-foreground);
-}
-
-.lp-m-note,
-.lp-m-next {
-  flex: 0 0 auto;
-  font-size: 10px;
-  color: var(--muted-foreground);
-}
-
-.lp-m-amt {
-  flex: 0 0 auto;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-.lp-m-amt[data-up='true'] {
-  color: var(--palm);
-}
-
-.lp-m-amt[data-up='false'] {
-  color: var(--chart-5);
-}
-
-.lp-m-figure {
-  margin: 0;
-  font-size: 27px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: -0.035em;
-  font-variant-numeric: tabular-nums;
-}
-
-.lp-m-delta {
-  margin: 6px 0 0;
-  font-size: 11px;
-  color: var(--palm);
-}
-
-.lp-m-chart {
-  display: block;
-  width: 100%;
-  height: 92px;
-  margin-top: 10px;
-}
-
-.lp-m-line {
-  fill: none;
-  stroke: var(--accent);
-  stroke-width: 1.6;
-  stroke-linecap: round;
-}
-
-.lp-m-splits {
-  display: flex;
-  gap: 18px;
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid rgba(28, 25, 23, 0.07);
-}
-
-.lp-m-splits div {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.lp-m-splits span {
-  font-size: 10px;
-  color: var(--muted-foreground);
-}
-
-.lp-m-splits b {
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
-}
-
-.lp-m-rec .lp-m-name {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-}
-
-.lp-m-rec em {
-  font-style: normal;
-  font-size: 10px;
-  color: var(--muted-foreground);
-}
-
-.lp-m-flag {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--chart-3) 12%, transparent);
-  font-size: 9.5px;
-  color: var(--chart-5);
-}
-
-.lp-m-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: rgba(28, 25, 23, 0.06);
-  font-size: 10px;
-  color: var(--muted-foreground);
-}
-
-.lp-m-chip[data-changed='true'] {
-  background: var(--accent-soft);
-  color: var(--accent);
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--lagoon-deep) 24%, transparent);
-}
-
-.lp-m-cat[data-editing='true'] {
-  background: color-mix(in oklab, var(--lagoon) 5%, transparent);
-}
-
-.lp-m-learn {
-  margin: 10px 12px 14px;
-  padding: 11px 12px;
-  border: 1px solid color-mix(in oklab, var(--lagoon-deep) 22%, transparent);
-  border-radius: 9px;
-  background: var(--card);
-  box-shadow: 0 6px 18px rgba(28, 25, 23, 0.06);
-}
-
-.lp-m-learn p {
-  margin: 0 0 9px;
-  font-size: 11.5px;
-}
-
-.lp-m-learn-row {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 10.5px;
-}
-
-.lp-m-learn-row em {
-  font-style: normal;
-  color: var(--muted-foreground);
-}
-
-.lp-m-ghost,
-.lp-m-solid {
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 10.5px;
-  font-weight: 500;
-}
-
-.lp-m-ghost {
-  border: 1px solid rgba(28, 25, 23, 0.14);
-  color: var(--sea-ink-soft);
-}
-
-.lp-m-solid {
-  background: var(--accent);
-  color: var(--primary-foreground);
-}
-
-/* Budget replica ── the flex pool is the focal point of the screen, so it gets
-   the tint and the pace bar while the fixed lines stay a plain list. */
-.lp-m-kicker {
-  margin: 0 0 5px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 9.5px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--muted-foreground);
-}
-
-.lp-m-pool {
-  padding: 11px 12px 12px;
-  border-block: 1px solid rgba(28, 25, 23, 0.07);
-  background: color-mix(in oklab, var(--lagoon) 6%, transparent);
-}
-
-.lp-m-pool-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 9px;
-  font-size: 11.5px;
-  font-weight: 600;
-}
-
-.lp-m-pool-head em {
-  display: block;
-  margin-top: 2px;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  color: var(--muted-foreground);
-}
-
-/* Where the month actually is, against how much of the pool is gone. */
-.lp-m-today {
-  position: absolute;
-  inset-block: 0;
-  width: 2px;
-  border-radius: 999px;
-  background: rgba(28, 25, 23, 0.55);
-}
-
-.lp-m-pace-note {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 7px;
-  font-size: 10px;
-  color: var(--muted-foreground);
-}
-
-.lp-m-fix .lp-m-name em {
-  font-size: 10px;
-}
-
-.lp-m-mini {
-  flex: 0 0 auto;
-  width: 52px;
-  height: 5px;
-  border-radius: 999px;
-  background: rgba(28, 25, 23, 0.09);
-  overflow: hidden;
-}
-
-.lp-m-mini i {
-  display: block;
-  height: 100%;
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--lagoon-deep) 65%, transparent);
-}
-
-/* Reads as the field it is on the real screen: a number you typed once. */
-.lp-m-field {
-  flex: 0 0 auto;
-  padding: 3px 9px;
-  border: 1px solid rgba(28, 25, 23, 0.16);
-  border-radius: 7px;
-  background: var(--card);
-  font-size: 11px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  color: var(--sea-ink);
-}
-
 /* Budget section ── the positions Bud takes on budgeting, beside the screen
    where they play out. */
 .lp-budget {
@@ -1563,9 +960,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .lp-app,
-  .lp-spark path,
-  .lp-pace-track i {
+  .lp-app {
     animation-duration: 1ms;
     animation-delay: 0ms;
   }
diff --git a/src/components/landing/mocks.tsx b/src/components/landing/mocks.tsx
index e6bcbec..d5cf53e 100644
--- a/src/components/landing/mocks.tsx
+++ b/src/components/landing/mocks.tsx
@@ -1,474 +1,1163 @@
-/* DOM replicas of Bud's own screens. Real numbers from a plausible month, drawn
-   with markup rather than screenshots so they stay sharp and legible when the
-   cards scale down. */
-
-import type { CSSProperties } from 'react'
-
-const appNav = [
-  'Dashboard',
-  'Transactions',
-  'Budget',
-  'Cash flow',
-  'Net worth',
-  'Accounts',
+/* Product shots built from the same pieces as the signed-in app — Page,
+   Panel, HeroMetric, PaceBar, the ledger — so the landing page shows the
+   screens as they actually are, not a restyled sketch of them. */
+
+import { Fragment, type ComponentProps, type ReactNode } from 'react'
+import {
+  ArrowLeftRight,
+  Landmark,
+  LayoutDashboard,
+  LineChart,
+  List,
+  PanelLeftClose,
+  PieChart,
+  Repeat,
+  Settings2,
+  Tags,
+  Wallet,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+import { CategoryDonut } from '#/components/category-donut'
+import {
+  CategoryDot,
+  DataList,
+  EmptyState,
+  HeroMetric,
+  Kicker,
+  RowGroupHeader,
+  RowMeta,
+  RowTitle,
+  ShareBar,
+  Stat,
+} from '#/components/dense'
+import { Money } from '#/components/money'
+import { PaceBar } from '#/components/pace-bar'
+import { Page, PageSummary, Panel } from '#/components/panel'
+import { SpendingChart } from '#/components/spending-chart'
+import { SproutMark } from '#/components/sprout'
+import { Badge } from '#/components/ui/badge'
+import { Button } from '#/components/ui/button'
+import { Input } from '#/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#/components/ui/select'
+import { formatDayLabel, formatUsdPlain } from '#/lib/money'
+import { cn } from '#/lib/utils'
+
+const MONTH = 'August'
+const MONTH_KEY = '2026-08'
+const THROUGH_DAY = 14
+const DAYS_IN_MONTH = 31
+const PACE = THROUGH_DAY / DAYS_IN_MONTH
+
+const NAV = [
+  { label: 'Dashboard', icon: LayoutDashboard },
+  { label: 'Transactions', icon: List },
+  { label: 'Budget', icon: Wallet },
+  { label: 'Cash flow', icon: ArrowLeftRight },
+  { label: 'Net worth', icon: LineChart },
+  { label: 'Investments', icon: PieChart },
+  { label: 'Accounts', icon: Landmark },
+  { label: 'Recurring', icon: Repeat },
+] as const
+
+const SETTINGS = [
+  { label: 'Categories', icon: Tags },
+  { label: 'Rules', icon: Settings2 },
+] as const
+
+const COLORS = {
+  housing: 'var(--chart-1)',
+  groceries: 'var(--chart-2)',
+  restaurants: 'var(--chart-3)',
+  shopping: 'var(--chart-4)',
+  coffee: 'var(--chart-5)',
+  other: 'color-mix(in oklab, var(--sea-ink) 16%, transparent)',
+}
+
+function running(daily: Array<number>) {
+  let sum = 0
+  return daily.map((n, i) => {
+    sum += n
+    return { day: i + 1, cumulative: sum }
+  })
+}
+
+const thisMonthSpend = running([
+  2486, 42, 118, 0, 86, 0, 0, 312, 64, 156, 28, 94, 71, 390,
+])
+const lastMonthSpend = running([
+  2400, 88, 156, 42, 210, 18, 0, 280, 94, 122, 66, 188, 54, 340, 90, 0, 0, 210,
+  76, 144, 38, 0, 188, 92, 56, 210, 44, 0, 0, 168, 72,
+])
+
+const spentThisMonth = thisMonthSpend.at(-1)?.cumulative ?? 0
+const incomeThisMonth = 8412
+const kept = incomeThisMonth - spentThisMonth
+const flexSpent = 1186
+const flexPlanned = 2600
+const fixedSpent = 2489
+const fixedPlanned = 3814
+const planned = flexPlanned + fixedPlanned
+const left = planned - spentThisMonth
+
+const spendMix = [
+  { name: 'Housing', color: COLORS.housing, amount: 2400 },
+  { name: 'Groceries', color: COLORS.groceries, amount: 412 },
+  { name: 'Restaurants', color: COLORS.restaurants, amount: 218 },
+  { name: 'Shopping', color: COLORS.shopping, amount: 280 },
+  { name: 'Coffee', color: COLORS.coffee, amount: 96 },
+  { name: 'Everything else', color: COLORS.other, amount: 441, muted: true },
 ]
 
-const mix = [
-  { name: 'Fixed', amount: '$3,980', color: 'var(--chart-1)' },
-  { name: 'Groceries', amount: '$612', color: 'var(--chart-2)' },
-  { name: 'Restaurants', amount: '$438', color: 'var(--chart-3)' },
-  { name: 'Travel', amount: '$305', color: 'var(--chart-5)' },
+const recentDays = [
+  {
+    date: '2026-08-14',
+    spent: 90.95,
+    rows: [
+      {
+        merchant: 'Whole Foods',
+        category: 'Groceries',
+        color: COLORS.groceries,
+        amount: 84.2,
+      },
+      {
+        merchant: 'Blue Bottle',
+        category: 'Coffee',
+        color: COLORS.coffee,
+        amount: 6.75,
+      },
+    ],
+  },
+  {
+    date: '2026-08-13',
+    spent: 62.1,
+    rows: [
+      {
+        merchant: 'Trader Joe’s',
+        category: 'Groceries',
+        color: COLORS.groceries,
+        amount: 62.1,
+      },
+    ],
+  },
+  {
+    date: '2026-08-12',
+    spent: 0,
+    rows: [
+      {
+        merchant: 'Payroll',
+        category: 'Income',
+        color: COLORS.housing,
+        amount: -4206,
+      },
+    ],
+  },
+  {
+    date: '2026-08-11',
+    spent: 390,
+    rows: [
+      {
+        merchant: 'Amex payment',
+        category: 'Transfer',
+        color: COLORS.other,
+        amount: 1240,
+        transfer: true,
+      },
+      {
+        merchant: 'REI',
+        category: 'Shopping',
+        color: COLORS.shopping,
+        amount: 86.4,
+      },
+    ],
+  },
 ]
 
-const txns = [
-  { merchant: 'Whole Foods', cat: 'Groceries', amount: '−$84.20' },
-  { merchant: 'Amex payment', cat: 'Transfer', amount: '−$1,240.00' },
-  { merchant: 'Blue Bottle', cat: 'Coffee', amount: '−$6.75' },
-  { merchant: 'Payroll', cat: 'Income', amount: '+$4,206.00' },
+const cashAccounts = [
+  {
+    name: 'Checking',
+    meta: 'checking · Chase',
+    mask: '4021',
+    amount: 8240.19,
+    available: 7912.4,
+  },
+  {
+    name: 'Savings',
+    meta: 'savings · Ally',
+    mask: '7788',
+    amount: 4240,
+  },
 ]
 
-/** The hero's product shot: the dashboard, sidebar and all. */
-export function DashboardMock() {
-  return (
-    <div className="lp-app">
-      <div className="lp-app-side">
-        <p className="lp-app-brand">Bud</p>
-        <div className="lp-app-nav">
-          {appNav.map((item, i) => (
-            <span key={item} data-active={i === 0}>
-              <i aria-hidden="true" />
-              {item}
-            </span>
-          ))}
-        </div>
-      </div>
+const cards = [
+  {
+    name: 'Platinum',
+    meta: 'credit · Amex',
+    mask: '1009',
+    amount: 1240.55,
+    limit: 6800,
+  },
+  {
+    name: 'Sapphire',
+    meta: 'credit · Chase',
+    mask: '3312',
+    amount: 939.8,
+    limit: 12000,
+    due: 'due in 6d',
+  },
+]
 
-      <div className="lp-app-main">
-        <div className="lp-app-hero">
-          <div>
-            <p className="lp-app-kicker">Net worth</p>
-            <p className="lp-app-figure">$184,320</p>
-            <p className="lp-app-delta">+$2,140 since the start of the month</p>
-          </div>
-          <svg className="lp-spark" viewBox="0 0 190 52" aria-hidden="true">
-            <path d="M2 44C18 40 26 42 38 34s18-6 30-12 20 2 32-6 22 4 34-4 20 2 32-6" />
-          </svg>
-        </div>
+const investments = [
+  {
+    name: 'Brokerage',
+    meta: 'brokerage · Fidelity',
+    mask: '2210',
+    amount: 121532,
+  },
+  {
+    name: 'Roth IRA',
+    meta: 'ira · Schwab',
+    mask: '8830',
+    amount: 52488,
+  },
+]
 
-        <div className="lp-app-panels">
-          <div className="lp-app-col">
-            <div className="lp-app-panel">
-              <div className="lp-app-panel-head">
-                Flex pool <em>July</em>
-              </div>
-              <div className="lp-app-panel-body">
-                <div className="lp-pace">
-                  <span>
-                    <b>$282</b> left
-                  </span>
-                  <span>2,318 of 2,600</span>
-                </div>
-                <div className="lp-pace-track">
-                  <i style={{ '--w': '89%' } as CSSProperties} />
-                </div>
-              </div>
-            </div>
+const cashTotal = cashAccounts.reduce((sum, a) => sum + a.amount, 0)
+const cardTotal = cards.reduce((sum, a) => sum + a.amount, 0)
+const cardLimit = cards.reduce((sum, a) => sum + a.limit, 0)
+const investedTotal = investments.reduce((sum, a) => sum + a.amount, 0)
+const netWorth = cashTotal + investedTotal - cardTotal
+const assets = cashTotal + investedTotal
+const debts = cardTotal
 
-            <div className="lp-app-panel">
-              <div className="lp-app-panel-head">
-                Recent <em>View all</em>
-              </div>
-              <div className="lp-txns">
-                {txns.map((txn) => (
-                  <div key={txn.merchant} className="lp-txn">
-                    <span>{txn.merchant}</span>
-                    <span className="lp-txn-cat">{txn.cat}</span>
-                    <span className="lp-txn-amt">{txn.amount}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
+const nwHistory = [
+  { date: '2026-05-14', netWorth: 168420 },
+  { date: '2026-05-28', netWorth: 169880 },
+  { date: '2026-06-11', netWorth: 171240 },
+  { date: '2026-06-25', netWorth: 173010 },
+  { date: '2026-07-09', netWorth: 174660 },
+  { date: '2026-07-23', netWorth: 178420 },
+  { date: '2026-08-06', netWorth: 181890 },
+  { date: '2026-08-14', netWorth },
+]
 
-          <div className="lp-app-panel">
-            <div className="lp-app-panel-head">
-              Where it&rsquo;s going <em>$6,603</em>
-            </div>
-            <div className="lp-app-panel-body">
-              <div className="lp-donut-row">
-                <div className="lp-donut" aria-hidden="true" />
-                <div className="lp-legend">
-                  {mix.map((row) => (
-                    <div key={row.name}>
-                      <span>
-                        <i style={{ '--c': row.color } as CSSProperties} />
-                        {row.name}
-                      </span>
-                      <b>{row.amount}</b>
-                    </div>
-                  ))}
+const flexRows = [
+  { name: 'Groceries', color: COLORS.groceries, spent: 412 },
+  { name: 'Restaurants', color: COLORS.restaurants, spent: 218 },
+  { name: 'Shopping', color: COLORS.shopping, spent: 280 },
+  { name: 'Coffee', color: COLORS.coffee, spent: 96 },
+  { name: 'Transit', color: COLORS.housing, spent: 180 },
+]
+
+const fixedRows = [
+  { name: 'Rent', spent: 2400, planned: 2400 },
+  { name: 'Health insurance', spent: 0, planned: 640 },
+  { name: 'Car payment', spent: 0, planned: 465 },
+  { name: 'Utilities', spent: 0, planned: 220 },
+  { name: 'Internet', spent: 89, planned: 89 },
+]
+
+const ledger = [
+  {
+    date: '2026-08-14',
+    spent: 90.95,
+    rows: [
+      {
+        merchant: 'Whole Foods',
+        category: 'Groceries',
+        color: COLORS.groceries,
+        account: 'Checking ···4021',
+        amount: 84.2,
+      },
+      {
+        merchant: 'Blue Bottle',
+        category: 'Coffee',
+        color: COLORS.coffee,
+        account: 'Platinum ···1009',
+        amount: 6.75,
+      },
+    ],
+  },
+  {
+    date: '2026-08-13',
+    spent: 62.1,
+    rows: [
+      {
+        merchant: 'Trader Joe’s',
+        category: 'Groceries',
+        color: COLORS.groceries,
+        account: 'Checking ···4021',
+        amount: 62.1,
+      },
+    ],
+  },
+  {
+    date: '2026-08-12',
+    spent: 0,
+    rows: [
+      {
+        merchant: 'Payroll',
+        category: 'Income',
+        color: COLORS.housing,
+        account: 'Checking ···4021',
+        amount: -4206,
+      },
+    ],
+  },
+  {
+    date: '2026-08-11',
+    spent: 86.4,
+    rows: [
+      {
+        merchant: 'Amex payment',
+        category: 'Transfer',
+        color: COLORS.other,
+        account: 'Checking ···4021',
+        amount: 1240,
+        transfer: true,
+      },
+      {
+        merchant: 'REI',
+        category: 'Shopping',
+        color: COLORS.shopping,
+        account: 'Sapphire ···3312',
+        amount: 86.4,
+      },
+    ],
+  },
+]
+
+function PreviewShell({
+  title,
+  active,
+  actions,
+  sidebar = false,
+  children,
+}: {
+  title: string
+  active: string
+  actions?: ReactNode
+  sidebar?: boolean
+  children: ReactNode
+}) {
+  return (
+    <div className="lp-preview" aria-hidden="true">
+      <div className={sidebar ? 'lp-preview-shell' : undefined}>
+        {sidebar ? <PreviewSidebar active={active} /> : null}
+        <div className="min-w-0 flex-1">
+          <header className="app-shell-header gap-2.5">
+            <div className="flex min-w-0 flex-1 items-center justify-between gap-2.5">
+              <h1 className="truncate text-[15px] font-semibold tracking-tight text-[var(--sea-ink)]">
+                {title}
+              </h1>
+              {actions ? (
+                <div className="flex shrink-0 items-center gap-1.5 sm:gap-2.5">
+                  {actions}
                 </div>
-              </div>
+              ) : null}
             </div>
-          </div>
+            <span className="size-7 shrink-0 rounded-full bg-muted ring-1 ring-border" />
+          </header>
+          <div className="app-shell-main">{children}</div>
         </div>
       </div>
     </div>
   )
 }
 
-/* The month the mocks share: $2,600 of flex with $282 left, $3,980 of fixed
-   bills against $4,400 planned, and $305 of travel filed on its own. */
-const flexSpend = [
-  { name: 'Groceries', amount: '$612' },
-  { name: 'Restaurants', amount: '$438' },
-  { name: 'Coffee', amount: '$186' },
-]
-
-const fixedLines = [
-  { name: 'Rent', spent: '$2,400', planned: '2,400', fill: '100%' },
-  { name: 'Health insurance', spent: '$640', planned: '640', fill: '100%' },
-  { name: 'Car payment', spent: '$465', planned: '465', fill: '100%' },
-  { name: 'Utilities', spent: '$180', planned: '220', fill: '82%' },
-  { name: 'Internet', spent: '$89', planned: '89', fill: '100%' },
-]
-
-/** The budget screen: one pool for everyday spending, fixed lines under it. */
-export function BudgetMock() {
+function PreviewSidebar({ active }: { active: string }) {
   return (
-    <div className="lp-m">
-      <div className="lp-m-head">
-        Budget <em>July</em>
-      </div>
-
-      <div className="lp-m-body">
-        <p className="lp-m-kicker">Left to spend</p>
-        <p className="lp-m-figure">$397</p>
-        <p className="lp-m-delta">$6,603 spent of $7,000 planned</p>
-      </div>
-
-      <div className="lp-m-pool">
-        <div className="lp-m-pool-head">
-          <span>
-            Flex pool
-            <em>Groceries, dining, shopping &mdash; one monthly number.</em>
-          </span>
-          <span className="lp-m-field">2,600</span>
+    <aside className="lp-preview-side">
+      <div className="flex h-12 items-center">
+        <div className="flex w-14 shrink-0 items-center justify-center">
+          <SproutMark className="size-[22px] text-[var(--sea-ink)]" />
         </div>
-
-        <div className="lp-pace">
-          <span>
-            <b>$282</b> left
-          </span>
-          <span>2,318 of 2,600</span>
-        </div>
-        <div className="lp-pace-track">
-          <i style={{ '--w': '89%' } as CSSProperties} />
-          <span className="lp-m-today" style={{ left: '87%' }} />
+        <span className="display-title shrink-0 text-[19px] font-semibold leading-none tracking-tight text-[var(--sea-ink)]">
+          Bud
+        </span>
+        <span className="mr-2 ml-auto flex size-6 items-center justify-center text-[var(--sea-ink-soft)]">
+          <PanelLeftClose className="size-3.5" />
+        </span>
+      </div>
+      <nav className="flex flex-1 flex-col gap-7 pt-0.5 pb-3">
+        <div className="flex flex-col gap-px">
+          {NAV.map((item) => (
+            <PreviewNavLink
+              key={item.label}
+              {...item}
+              active={item.label === active}
+            />
+          ))}
         </div>
-        <div className="lp-m-pace-note">
-          <span>89% of flex spent</span>
-          <span>87% through month</span>
+        <div className="flex flex-col gap-px">
+          <p className="kicker shrink-0 pr-3 pl-14 pb-1.5 whitespace-nowrap">
+            Settings
+          </p>
+          {SETTINGS.map((item) => (
+            <PreviewNavLink key={item.label} {...item} active={false} />
+          ))}
         </div>
-      </div>
+      </nav>
+    </aside>
+  )
+}
 
-      <div className="lp-m-rows">
-        {flexSpend.map((row) => (
-          <div key={row.name} className="lp-m-row">
-            <span className="lp-m-name">{row.name}</span>
-            <b className="lp-m-amt">{row.amount}</b>
-          </div>
-        ))}
-      </div>
+function PreviewNavLink({
+  label,
+  icon: Icon,
+  active,
+}: {
+  label: string
+  icon: LucideIcon
+  active: boolean
+}) {
+  return (
+    <span className="group flex w-full items-center overflow-hidden text-[13px] font-medium">
+      <span className="flex w-14 shrink-0 items-center justify-center">
+        <span
+          className={cn(
+            'flex size-8 items-center justify-center rounded-md',
+            active
+              ? 'bg-muted text-[var(--sea-ink)]'
+              : 'text-[var(--sea-ink-soft)]',
+          )}
+        >
+          <Icon
+            className={cn('size-4', active ? 'opacity-90' : 'opacity-70')}
+            strokeWidth={active ? 2 : 1.75}
+          />
+        </span>
+      </span>
+      <span
+        className={cn(
+          'shrink-0 pr-3 whitespace-nowrap',
+          active ? 'text-[var(--sea-ink)]' : 'text-[var(--sea-ink-soft)]',
+        )}
+      >
+        {label}
+      </span>
+    </span>
+  )
+}
 
-      <div className="lp-m-group">
-        <span>Fixed</span>
-        <b>$3,980 of $4,400</b>
-      </div>
-      {fixedLines.map((row) => (
-        <div key={row.name} className="lp-m-fix">
-          <span className="lp-m-name">
-            {row.name} <em>{row.spent} spent</em>
-          </span>
-          <span className="lp-m-mini" aria-hidden="true">
-            <i style={{ width: row.fill }} />
-          </span>
-          <span className="lp-m-field">{row.planned}</span>
-        </div>
-      ))}
-    </div>
+function PreviewPanel({
+  id,
+  children,
+  ...props
+}: ComponentProps<typeof Panel>) {
+  return (
+    <Panel id={id} {...props} collapsible={false}>
+      {children}
+    </Panel>
   )
 }
 
-type AccountRow = {
-  inst: string
-  name: string
-  mask: string
-  amount: string
-  note?: string
+/** Stacked page body — skips the app's viewport masonry, which would pack
+    these cards as if they owned the whole window. */
+function PreviewStack({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex w-full min-w-0 flex-col gap-3 md:gap-4">
+      {children}
+    </div>
+  )
 }
 
-const groups: Array<{ name: string; total: string; rows: Array<AccountRow> }> =
-  [
-    {
-      name: 'Cash',
-      total: '$12,480.19',
-      rows: [
-        {
-          inst: 'Chase',
-          name: 'Checking',
-          mask: '••4021',
-          amount: '$8,240.19',
-        },
-        { inst: 'Ally', name: 'Savings', mask: '••7788', amount: '$4,240.00' },
-        {
-          inst: 'Capital One',
-          name: '360',
-          mask: '••5514',
-          amount: '$2,010.00',
-        },
-      ],
-    },
-    {
-      name: 'Credit cards',
-      total: '−$2,180.35',
-      rows: [
-        {
-          inst: 'Amex',
-          name: 'Platinum',
-          mask: '••1009',
-          amount: '−$1,240.55',
-          note: '18% used',
-        },
-        {
-          inst: 'Chase',
-          name: 'Sapphire',
-          mask: '••3312',
-          amount: '−$939.80',
-          note: 'due in 6 days',
-        },
-      ],
-    },
-    {
-      name: 'Investments',
-      total: '$174,020.00',
-      rows: [
-        {
-          inst: 'Fidelity',
-          name: 'Brokerage',
-          mask: '••2210',
-          amount: '$121,532.00',
-        },
-        {
-          inst: 'Schwab',
-          name: 'Roth IRA',
-          mask: '••8830',
-          amount: '$52,488.00',
-        },
-      ],
-    },
-  ]
+/** The hero's product shot: the dashboard, sidebar and all. */
+export function DashboardMock() {
+  const thisThrough = thisMonthSpend.at(-1)?.cumulative ?? 0
+  const priorThrough =
+    lastMonthSpend.find((p) => p.day === THROUGH_DAY)?.cumulative ?? 0
+  const delta = thisThrough - priorThrough
 
-export function AccountsMock() {
   return (
-    <div className="lp-m">
-      <div className="lp-m-head">
-        Accounts <em>6 linked · synced 4m ago</em>
-      </div>
-      <div className="lp-m-groups">
-        {groups.map((group) => (
-          <div key={group.name}>
-            <div className="lp-m-group">
-              <span>{group.name}</span>
-              <b>{group.total}</b>
+    <div className="lp-app">
+      <PreviewShell
+        title="Dashboard"
+        active="Dashboard"
+        sidebar
+        actions={
+          <Button variant="outline" size="sm" tabIndex={-1}>
+            Connect account
+          </Button>
+        }
+      >
+        <Page>
+          <PageSummary>
+            <HeroMetric
+              label="Net worth"
+              value={formatUsdPlain(netWorth)}
+              meta={`Kept ${formatUsdPlain(kept)} of ${formatUsdPlain(incomeThisMonth)} earned in ${MONTH}`}
+            />
+            <div className="w-full max-w-[320px] space-y-2">
+              <PaceBar
+                label="Flex budget pace"
+                spent={flexSpent}
+                budget={flexPlanned}
+                pacePct={PACE}
+              />
+              <p className="text-[12px] text-muted-foreground text-pretty">
+                <span className="tabular-nums">
+                  {formatUsdPlain(flexSpent)} of {formatUsdPlain(flexPlanned)}{' '}
+                  flex
+                </span>
+              </p>
             </div>
-            {group.rows.map((row) => (
-              <div key={row.mask} className="lp-m-row">
-                <i className="lp-m-inst" aria-hidden="true">
-                  {row.inst.slice(0, 1)}
-                </i>
-                <span className="lp-m-name">
-                  {row.inst} {row.name} <em>{row.mask}</em>
+          </PageSummary>
+
+          <PreviewStack>
+            <PreviewPanel
+              id="lp-dashboard-spending"
+              title="Spending"
+              value={formatUsdPlain(spentThisMonth)}
+              hint={`${formatUsdPlain(Math.abs(delta))} ${delta > 0 ? 'more' : 'less'} than last month`}
+              action={
+                <span className="inline-flex h-7 items-center rounded-md border border-border/70 px-2.5 text-[12px] text-muted-foreground">
+                  vs last month
                 </span>
-                {row.note ? (
-                  <span className="lp-m-note">{row.note}</span>
-                ) : null}
-                <b className="lp-m-amt">{row.amount}</b>
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
+              }
+            >
+              <SpendingChart
+                thisMonth={thisMonthSpend}
+                compare={lastMonthSpend}
+                compareLabel="Last month"
+                throughDay={THROUGH_DAY}
+                daysInMonth={DAYS_IN_MONTH}
+              />
+            </PreviewPanel>
+
+            <div className="lp-preview-split">
+              <PreviewPanel
+                id="lp-dashboard-mix"
+                span={5}
+                title="Where it's going"
+                description={`Biggest categories in ${MONTH}.`}
+                value={formatUsdPlain(spentThisMonth)}
+                action={<span className="section-link">Cash flow</span>}
+              >
+                <div className="grid justify-items-center gap-5 pt-1 sm:grid-cols-[120px_minmax(0,1fr)] sm:items-center sm:justify-items-stretch">
+                  <CategoryDonut segments={spendMix} />
+                  <DataList className="w-full">
+                    {spendMix.map((row) => (
+                      <li key={row.name} className="data-row">
+                        <span className="flex min-w-0 items-center gap-2">
+                          <CategoryDot color={row.color} />
+                          <span
+                            className={
+                              row.muted
+                                ? 'truncate text-muted-foreground'
+                                : 'truncate font-medium text-[var(--sea-ink)]'
+                            }
+                          >
+                            {row.name}
+                          </span>
+                        </span>
+                        <span
+                          className={
+                            row.muted
+                              ? 'amount-cell font-medium text-muted-foreground'
+                              : 'amount-cell text-[var(--sea-ink)]'
+                          }
+                        >
+                          {formatUsdPlain(row.amount)}
+                        </span>
+                      </li>
+                    ))}
+                  </DataList>
+                </div>
+              </PreviewPanel>
+
+              <PreviewPanel
+                id="lp-dashboard-recent"
+                span={7}
+                title="Recent"
+                hint="7 transactions"
+                action={<span className="section-link">View all</span>}
+                flush
+              >
+                <DataList>
+                  {recentDays.map((day) => (
+                    <Fragment key={day.date}>
+                      <RowGroupHeader
+                        label={formatDayLabel(day.date)}
+                        value={
+                          day.spent > 0 ? formatUsdPlain(day.spent) : undefined
+                        }
+                      />
+                      {day.rows.map((tx) => (
+                        <li key={tx.merchant} className="recent-tx">
+                          <div className="recent-tx-main">
+                            <span className="inline-pick-title truncate">
+                              {tx.merchant}
+                            </span>
+                            <span className="inline-pick-meta inline-flex items-center gap-1.5">
+                              <CategoryDot
+                                color={tx.color}
+                                className="size-1.5"
+                              />
+                              <span className="truncate">{tx.category}</span>
+                            </span>
+                          </div>
+                          <Money
+                            amount={tx.amount}
+                            plaid
+                            className="shrink-0"
+                          />
+                        </li>
+                      ))}
+                    </Fragment>
+                  ))}
+                </DataList>
+              </PreviewPanel>
+            </div>
+          </PreviewStack>
+        </Page>
+      </PreviewShell>
     </div>
   )
 }
 
-export function NetWorthMock() {
+/** The budget screen: one pool for everyday spending, fixed lines under it. */
+export function BudgetMock() {
   return (
     <div className="lp-m">
-      <div className="lp-m-head">
-        Net worth <em>Last 12 months</em>
-      </div>
-      <div className="lp-m-body">
-        <p className="lp-m-figure">$184,320</p>
-        <p className="lp-m-delta">+$31,480 this year · snapshot taken daily</p>
-
-        <svg className="lp-m-chart" viewBox="0 0 320 92" aria-hidden="true">
-          <defs>
-            <linearGradient id="lp-nw-fill" x1="0" y1="0" x2="0" y2="1">
-              <stop
-                offset="0%"
-                stopColor="var(--lagoon-deep)"
-                stopOpacity="0.22"
-              />
-              <stop
-                offset="100%"
-                stopColor="var(--lagoon-deep)"
-                stopOpacity="0"
+      <PreviewShell
+        title="Budget"
+        active="Budget"
+        actions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" tabIndex={-1}>
+              Copy last month
+            </Button>
+            <Button size="sm" tabIndex={-1}>
+              Save
+            </Button>
+          </div>
+        }
+      >
+        <Page>
+          <PageSummary>
+            <HeroMetric
+              label="Left to spend"
+              value={formatUsdPlain(left)}
+              meta={
+                <>
+                  {formatUsdPlain(spentThisMonth)} spent of{' '}
+                  {formatUsdPlain(planned)} planned
+                </>
+              }
+            />
+            <div className="flex w-full min-w-0 flex-wrap items-end gap-3">
+              <div className="min-w-0 flex-1 basis-full sm:flex-none sm:basis-auto">
+                <Kicker>Month</Kicker>
+                <Input
+                  type="month"
+                  value={MONTH_KEY}
+                  readOnly
+                  tabIndex={-1}
+                  className="mt-1.5 w-full sm:w-44"
+                  aria-label="Month"
+                />
+              </div>
+              <div className="min-w-0 flex-1 basis-full sm:flex-none sm:basis-auto">
+                <Kicker>Expected income</Kicker>
+                <Input
+                  inputMode="decimal"
+                  value="8412"
+                  readOnly
+                  tabIndex={-1}
+                  className="mt-1.5 w-full text-right tabular-nums sm:w-[130px]"
+                  aria-label="Expected income"
+                />
+              </div>
+            </div>
+          </PageSummary>
+
+          <PreviewStack>
+            <PreviewPanel
+              id="lp-budget-flex"
+              span={6}
+              title="Flex pool"
+              description="Groceries, dining, shopping — one monthly number."
+              value={formatUsdPlain(flexSpent)}
+              hint={`of ${formatUsdPlain(flexPlanned)}`}
+              action={
+                <Input
+                  inputMode="decimal"
+                  value="2600"
+                  readOnly
+                  tabIndex={-1}
+                  className="w-[104px] text-right tabular-nums"
+                  aria-label="Flex budget"
+                />
+              }
+            >
+              <PaceBar
+                spent={flexSpent}
+                budget={flexPlanned}
+                pacePct={PACE}
+                label={`${Math.round((flexSpent / flexPlanned) * 100)}% of flex spent`}
               />
-            </linearGradient>
-          </defs>
-          <path
-            className="lp-m-area"
-            d="M0 74C22 70 34 72 52 64s28-4 46-14 30 4 48-6 30 6 48-8 30 2 48-10 26 2 38-6v70H0z"
-            fill="url(#lp-nw-fill)"
-          />
-          <path
-            className="lp-m-line"
-            d="M0 74C22 70 34 72 52 64s28-4 46-14 30 4 48-6 30 6 48-8 30 2 48-10 26 2 38-6"
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
+              <DataList className="mt-3">
+                {flexRows.map((row) => (
+                  <li key={row.name} className="data-row">
+                    <span className="flex min-w-0 items-center gap-2">
+                      <CategoryDot color={row.color} />
+                      <span className="truncate font-medium text-[var(--sea-ink)]">
+                        {row.name}
+                      </span>
+                    </span>
+                    <span className="tabular-nums text-muted-foreground">
+                      {formatUsdPlain(row.spent)}
+                    </span>
+                  </li>
+                ))}
+              </DataList>
+            </PreviewPanel>
 
-        <div className="lp-m-splits">
-          <div>
-            <span>Assets</span>
-            <b>$196,140</b>
-          </div>
-          <div>
-            <span>Liabilities</span>
-            <b>−$11,820</b>
-          </div>
-          <div>
-            <span>Added by hand</span>
-            <b>$18,400</b>
-          </div>
-        </div>
-      </div>
+            <PreviewPanel
+              id="lp-budget-fixed"
+              span={6}
+              title="Fixed"
+              description="Rent, insurance, subscriptions — same every month."
+              value={formatUsdPlain(fixedSpent)}
+              hint={`of ${formatUsdPlain(fixedPlanned)}`}
+              flush
+            >
+              <DataList>
+                {fixedRows.map((row) => {
+                  const pct = row.planned > 0 ? row.spent / row.planned : 0
+                  return (
+                    <li
+                      key={row.name}
+                      className="grid grid-cols-[minmax(0,1fr)_40px_88px] items-center gap-2.5 py-2.5 text-[13px] sm:grid-cols-[minmax(0,1fr)_64px_104px] sm:gap-4"
+                    >
+                      <div className="min-w-0">
+                        <p className="truncate font-medium text-[var(--sea-ink)]">
+                          {row.name}
+                        </p>
+                        <p className="text-[12px] tabular-nums text-muted-foreground">
+                          {formatUsdPlain(row.spent)} spent
+                          {row.planned > 0
+                            ? ` · ${Math.round(pct * 100)}%`
+                            : ''}
+                        </p>
+                      </div>
+                      <div
+                        className="h-1 w-10 overflow-hidden rounded-full bg-muted sm:w-16"
+                        aria-hidden
+                      >
+                        <div
+                          className="h-full rounded-full bg-[var(--lagoon-deep)]"
+                          style={{ width: `${Math.min(100, pct * 100)}%` }}
+                        />
+                      </div>
+                      <Input
+                        inputMode="decimal"
+                        value={String(row.planned)}
+                        readOnly
+                        tabIndex={-1}
+                        className="text-right tabular-nums"
+                        aria-label={`Planned amount for ${row.name}`}
+                      />
+                    </li>
+                  )
+                })}
+              </DataList>
+            </PreviewPanel>
+          </PreviewStack>
+        </Page>
+      </PreviewShell>
+    </div>
+  )
+}
 
-      <div className="lp-m-rows">
-        <div className="lp-m-group">
-          <span>Biggest movers</span>
-          <b>Since Jul 1</b>
-        </div>
-        {movers.map((row) => (
-          <div key={row.name} className="lp-m-row">
-            <span className="lp-m-name">{row.name}</span>
-            <b className="lp-m-amt" data-up={row.up}>
-              {row.change}
-            </b>
-          </div>
-        ))}
-      </div>
+export function AccountsMock() {
+  const cashMax = Math.max(...cashAccounts.map((a) => a.amount))
+  const cardUtil = cardTotal / cardLimit
+  const investMax = Math.max(...investments.map((a) => a.amount))
+
+  return (
+    <div className="lp-m">
+      <PreviewShell
+        title="Accounts"
+        active="Accounts"
+        actions={
+          <Button size="sm" tabIndex={-1}>
+            Add institution
+          </Button>
+        }
+      >
+        <Page>
+          <PageSummary>
+            <HeroMetric
+              label="Cash"
+              value={formatUsdPlain(cashTotal)}
+              meta={`${formatUsdPlain(7912.4)} available now · 2 accounts`}
+            />
+            <div className="flex flex-wrap gap-8">
+              <Stat label="Owed" value={formatUsdPlain(cardTotal)} />
+              <Stat label="Invested" value={formatUsdPlain(investedTotal)} />
+            </div>
+          </PageSummary>
+
+          <PreviewStack>
+            <PreviewPanel
+              id="lp-accounts-cash"
+              span={6}
+              title="Cash"
+              value={formatUsdPlain(cashTotal)}
+              flush
+            >
+              <DataList>
+                {cashAccounts.map((account) => (
+                  <AccountPreviewRow
+                    key={account.mask}
+                    account={account}
+                    max={cashMax}
+                  />
+                ))}
+              </DataList>
+            </PreviewPanel>
+
+            <PreviewPanel
+              id="lp-accounts-credit"
+              span={6}
+              title="Credit cards"
+              value={formatUsdPlain(cardTotal)}
+              hint={`of ${formatUsdPlain(cardLimit)} limit`}
+              tone="muted"
+              flush
+            >
+              <div className="space-y-1.5 px-3 pt-2.5">
+                <ShareBar
+                  value={cardTotal}
+                  total={cardLimit}
+                  color={
+                    cardUtil > 0.3 ? 'var(--chart-3)' : 'var(--lagoon-deep)'
+                  }
+                  className="h-1.5"
+                />
+                <p className="text-[11px] font-medium tabular-nums text-muted-foreground">
+                  {Math.round(cardUtil * 100)}% of your available credit is in
+                  use
+                </p>
+              </div>
+              <DataList>
+                {cards.map((account) => (
+                  <AccountPreviewRow
+                    key={account.mask}
+                    account={account}
+                    max={0}
+                    debt
+                  />
+                ))}
+              </DataList>
+            </PreviewPanel>
+
+            <PreviewPanel
+              id="lp-accounts-invest"
+              span={6}
+              title="Investments"
+              value={formatUsdPlain(investedTotal)}
+              flush
+            >
+              <DataList>
+                {investments.map((account) => (
+                  <AccountPreviewRow
+                    key={account.mask}
+                    account={account}
+                    max={investMax}
+                  />
+                ))}
+              </DataList>
+            </PreviewPanel>
+          </PreviewStack>
+        </Page>
+      </PreviewShell>
     </div>
   )
 }
 
-const movers = [
-  { name: 'Fidelity Brokerage', change: '+$3,412', up: true },
-  { name: 'Amex Platinum', change: '−$980', up: false },
-  { name: 'House', change: '+$1,200', up: true },
-]
+function AccountPreviewRow({
+  account,
+  max,
+  debt = false,
+}: {
+  account: {
+    name: string
+    meta: string
+    mask: string
+    amount: number
+    available?: number
+    limit?: number
+    due?: string
+  }
+  max: number
+  debt?: boolean
+}) {
+  const utilization =
+    account.limit && account.limit > 0
+      ? Math.min(1, account.amount / account.limit)
+      : null
+  const hot = utilization != null && utilization > 0.3
 
-const recurring = [
-  {
-    name: 'Rent',
-    cadence: 'Monthly · 1st',
-    amount: '$2,400.00',
-    next: 'Aug 1',
-  },
-  {
-    name: 'Car insurance',
-    cadence: 'Every 6 months',
-    amount: '$642.00',
-    next: 'Sep 14',
-  },
-  {
-    name: 'Netflix',
-    cadence: 'Monthly · 22nd',
-    amount: '$17.99',
-    next: 'Aug 22',
-    change: 'up $2.50',
-  },
-  {
-    name: 'iCloud+',
-    cadence: 'Monthly · 4th',
-    amount: '$9.99',
-    next: 'Aug 4',
-  },
-  {
-    name: 'Climbing gym',
-    cadence: 'Monthly · 8th',
-    amount: '$78.50',
-    next: 'Aug 8',
-  },
-  {
-    name: 'Blue Bottle beans',
-    cadence: 'Every 2 weeks',
-    amount: '$22.00',
-    next: 'Aug 5',
-  },
-  {
-    name: 'Phone plan',
-    cadence: 'Monthly · 17th',
-    amount: '$65.00',
-    next: 'Aug 17',
-  },
-  {
-    name: 'Renters insurance',
-    cadence: 'Yearly · March',
-    amount: '$212.00',
-    next: 'Mar 3',
-  },
-]
+  return (
+    <li>
+      <div className="data-row">
+        <span className="min-w-0 flex-1">
+          <RowTitle>
+            {account.name}
+            <span className="font-normal text-muted-foreground">
+              {' '}
+              ···{account.mask}
+            </span>
+          </RowTitle>
+          <RowMeta className="capitalize">
+            {account.meta}
+            {account.due ? (
+              <span className="font-medium text-amber-700 normal-case">
+                {' · '}
+                {account.due}
+              </span>
+            ) : null}
+          </RowMeta>
+        </span>
+        {max > 0 || utilization != null ? (
+          <ShareBar
+            value={account.amount}
+            total={utilization != null ? account.limit! : max}
+            color={
+              hot
+                ? 'var(--chart-3)'
+                : debt
+                  ? 'color-mix(in oklab, var(--sea-ink) 34%, transparent)'
+                  : 'var(--lagoon-deep)'
+            }
+            className="hidden w-14 shrink-0 sm:block"
+          />
+        ) : null}
+        <span className="shrink-0 text-right">
+          <span
+            className={cn(
+              'amount-cell block',
+              debt ? 'text-[var(--sea-ink-soft)]' : 'text-[var(--sea-ink)]',
+            )}
+          >
+            {formatUsdPlain(account.amount)}
+          </span>
+          {utilization != null ? (
+            <span
+              className={cn(
+                'block text-[11px] tabular-nums',
+                hot ? 'text-amber-700' : 'text-muted-foreground',
+              )}
+            >
+              {Math.round(utilization * 100)}% of{' '}
+              {formatUsdPlain(account.limit!)}
+            </span>
+          ) : account.available != null ? (
+            <span className="block text-[11px] tabular-nums text-muted-foreground">
+              {formatUsdPlain(account.available)} available
+            </span>
+          ) : null}
+        </span>
+      </div>
+    </li>
+  )
+}
+
+export function NetWorthMock() {
+  const values = nwHistory.map((h) => h.netWorth)
+  const min = Math.min(...values)
+  const span = Math.max(...values) - min
+  const w = 640
+  const h = 160
+  const pad = 12
+  const toY = (v: number) =>
+    span <= 0 ? h / 2 : h - pad - ((v - min) / span) * (h - pad * 2)
+  const points = nwHistory.map((point, i) => ({
+    x: (i / (nwHistory.length - 1)) * w,
+    y: toY(point.netWorth),
+  }))
+  const line = points
+    .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
+    .join(' ')
+  const area = `${line} L ${w} ${h} L 0 ${h} Z`
+  const first = nwHistory[0]
+  const last = nwHistory[nwHistory.length - 1]
+  const delta = last.netWorth - first.netWorth
+  const endTopPct = (points[points.length - 1].y / h) * 100
+  const debtShare = Math.round((debts / assets) * 100)
+  const largestAsset = Math.max(
+    ...cashAccounts.map((a) => a.amount),
+    ...investments.map((a) => a.amount),
+  )
 
-export function RecurringMock() {
   return (
     <div className="lp-m">
-      <div className="lp-m-head">
-        Recurring <em>9 found · $3,412 a month</em>
-      </div>
-      <div className="lp-m-rows">
-        {recurring.map((row) => (
-          <div key={row.name} className="lp-m-rec">
-            <span className="lp-m-name">
-              {row.name}
-              {row.change ? (
-                <span className="lp-m-flag">
+      <PreviewShell title="Net worth" active="Net worth">
+        <Page>
+          <PageSummary>
+            <HeroMetric
+              label="Net worth"
+              value={formatUsdPlain(netWorth)}
+              meta={`Up ${formatUsdPlain(delta)} since May 14`}
+            />
+            <div className="flex flex-wrap items-end gap-8">
+              <div className="lp-preview-debt-share w-[220px] space-y-2">
+                <ShareBar
+                  value={debts}
+                  total={assets}
+                  color="color-mix(in oklab, var(--sea-ink) 34%, transparent)"
+                  className="h-2"
+                />
+                <p className="text-[11px] font-medium text-muted-foreground">
+                  Debts are {debtShare}% of what you own
+                </p>
+              </div>
+              <Stat
+                label="Assets"
+                value={formatUsdPlain(assets)}
+                tone="positive"
+              />
+              <Stat label="Debts" value={formatUsdPlain(debts)} />
+            </div>
+          </PageSummary>
+
+          <PreviewStack>
+            <PreviewPanel
+              id="lp-net-worth-trend"
+              title="Trend"
+              value={`↑ ${formatUsdPlain(delta)}`}
+              tone="positive"
+              action={
+                <div className="flex gap-0.5">
+                  {['1M', '3M', 'YTD', '1Y', 'ALL'].map((range) => (
+                    <span
+                      key={range}
+                      className="range-pill"
+                      data-active={range === '3M'}
+                    >
+                      {range}
+                    </span>
+                  ))}
+                </div>
+              }
+            >
+              <div className="space-y-2 pt-1">
+                <div className="relative border-b border-border/70">
                   <svg
-                    width="9"
-                    height="9"
-                    viewBox="0 0 10 10"
-                    aria-hidden="true"
+                    viewBox={`0 0 ${w} ${h}`}
+                    preserveAspectRatio="none"
+                    className="h-40 w-full"
+                    aria-hidden
                   >
+                    <defs>
+                      <linearGradient
+                        id="lp-nw-area"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor="var(--lagoon)"
+                          stopOpacity="0.26"
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor="var(--lagoon)"
+                          stopOpacity="0"
+                        />
+                      </linearGradient>
+                    </defs>
+                    <path d={area} fill="url(#lp-nw-area)" />
                     <path
-                      d="M5 8.5V2M5 2L2 5M5 2l3 3"
+                      d={line}
                       fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.6"
+                      stroke="var(--lagoon-deep)"
+                      strokeWidth="2"
+                      strokeLinejoin="round"
                       strokeLinecap="round"
+                      vectorEffect="non-scaling-stroke"
                     />
                   </svg>
-                  {row.change}
-                </span>
-              ) : null}
-              <em>{row.cadence}</em>
-            </span>
-            <span className="lp-m-next">next {row.next}</span>
-            <b className="lp-m-amt">{row.amount}</b>
-          </div>
-        ))}
-      </div>
+                  <span
+                    className="absolute right-0 size-2 -translate-y-1/2 translate-x-1/2 rounded-full bg-[var(--lagoon-deep)] ring-2 ring-background"
+                    style={{ top: `${endTopPct}%` }}
+                    aria-hidden
+                  />
+                </div>
+                <div className="flex items-baseline justify-between text-[11px] tabular-nums text-muted-foreground">
+                  <span>May 14</span>
+                  <span>Aug 14</span>
+                </div>
+              </div>
+            </PreviewPanel>
+
+            <PreviewPanel
+              id="lp-net-worth-assets"
+              span={6}
+              title="Assets"
+              description="Accounts and anything you've valued by hand."
+              value={formatUsdPlain(assets)}
+              action={
+                <Button variant="ghost" size="xs" tabIndex={-1}>
+                  Add
+                </Button>
+              }
+            >
+              <DataList className="mt-1">
+                {[...cashAccounts, ...investments].map((row) => (
+                  <li
+                    key={row.mask}
+                    className="grid grid-cols-[1fr_auto] items-center gap-4 py-2.5 text-[13px] sm:grid-cols-[1fr_56px_auto]"
+                  >
+                    <span className="flex min-w-0 items-baseline gap-2">
+                      <span className="truncate font-medium text-[var(--sea-ink)]">
+                        {row.name}
+                      </span>
+                      <span className="shrink-0 text-[12px] capitalize text-muted-foreground">
+                        {row.meta.split(' · ')[0]}
+                      </span>
+                    </span>
+                    <ShareBar
+                      value={row.amount}
+                      total={largestAsset}
+                      className="hidden sm:block"
+                    />
+                    <span className="amount-cell text-[var(--sea-ink)]">
+                      {formatUsdPlain(row.amount)}
+                    </span>
+                  </li>
+                ))}
+              </DataList>
+            </PreviewPanel>
+          </PreviewStack>
+        </Page>
+      </PreviewShell>
+    </div>
+  )
+}
+
+export function RecurringMock() {
+  return (
+    <div className="lp-m">
+      <PreviewShell title="Recurring" active="Recurring">
+        <Page>
+          <EmptyState
+            title="Subscriptions & bills"
+            description="Recurring stream detection lands next — once you have a few months of transactions, Bud will surface subscriptions, cadence, and price changes here."
+          />
+        </Page>
+      </PreviewShell>
     </div>
   )
 }
@@ -476,63 +1165,108 @@ export function RecurringMock() {
 export function CategoriesMock() {
   return (
     <div className="lp-m">
-      <div className="lp-m-head">
-        Transactions <em>August</em>
-      </div>
-      <div className="lp-m-rows">
-        <div className="lp-m-cat">
-          <span className="lp-m-name">Trader Joe&rsquo;s</span>
-          <span className="lp-m-chip">Groceries</span>
-          <b className="lp-m-amt">−$62.10</b>
-        </div>
-        <div className="lp-m-cat" data-editing="true">
-          <span className="lp-m-name">Whole Foods Market</span>
-          <span className="lp-m-chip" data-changed="true">
-            Groceries
-            <svg width="9" height="9" viewBox="0 0 10 10" aria-hidden="true">
-              <path
-                d="M2 3.5L5 6.5 8 3.5"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
+      <PreviewShell title="Transactions" active="Transactions">
+        <Page>
+          <PageSummary>
+            <div className="flex gap-8 sm:gap-10">
+              <Stat label="Out" value={formatUsdPlain(spentThisMonth)} />
+              <Stat label="In" value={formatUsdPlain(incomeThisMonth)} />
+            </div>
+            <div className="toolbar">
+              <Input
+                placeholder="Search merchants…"
+                readOnly
+                tabIndex={-1}
+                className="w-full sm:w-[220px]"
               />
-            </svg>
-          </span>
-          <b className="lp-m-amt">−$84.20</b>
-        </div>
-      </div>
-
-      <div className="lp-m-learn">
-        <p>
-          Always file <b>Whole Foods Market</b> under Groceries?
-        </p>
-        <div className="lp-m-learn-row">
-          <span className="lp-m-ghost">Just this one</span>
-          <span className="lp-m-solid">Remember it</span>
-          <em>fixes 14 already filed</em>
-        </div>
-      </div>
+              <Input
+                type="month"
+                value={MONTH_KEY}
+                readOnly
+                tabIndex={-1}
+                className="min-w-0 flex-1 sm:w-44 sm:flex-none"
+              />
+              <Select value="all">
+                <SelectTrigger
+                  className="min-w-0 flex-1 sm:w-[200px] sm:flex-none"
+                  tabIndex={-1}
+                >
+                  <SelectValue placeholder="All accounts" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All accounts</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </PageSummary>
 
-      <div className="lp-m-rows">
-        {refiled.map((row) => (
-          <div key={row.date} className="lp-m-cat">
-            <span className="lp-m-name">
-              Whole Foods Market <em>{row.date}</em>
-            </span>
-            <span className="lp-m-chip" data-changed="true">
-              Groceries
-            </span>
-            <b className="lp-m-amt">{row.amount}</b>
-          </div>
-        ))}
-      </div>
+          <PreviewStack>
+            <PreviewPanel
+              id="lp-transactions-ledger"
+              title="Ledger"
+              hint="6 shown"
+              flush
+            >
+              <table className="ledger-table">
+                <thead>
+                  <tr>
+                    <th className="w-[42%]">Merchant</th>
+                    <th className="w-[24%]">Category</th>
+                    <th className="w-[20%]">Account</th>
+                    <th className="w-[14%] text-right">Amount</th>
+                  </tr>
+                </thead>
+                {ledger.map((group) => (
+                  <tbody key={group.date}>
+                    <tr className="ledger-group">
+                      <td colSpan={3}>{formatDayLabel(group.date)}</td>
+                      <td className="text-right">
+                        {group.spent > 0 ? formatUsdPlain(group.spent) : null}
+                      </td>
+                    </tr>
+                    {group.rows.map((tx) => (
+                      <tr
+                        key={tx.merchant}
+                        className={
+                          tx.merchant === 'Whole Foods' ? 'bg-muted' : undefined
+                        }
+                      >
+                        <td>
+                          <div className="flex min-w-0 items-center gap-2">
+                            <span className="truncate font-medium text-[var(--sea-ink)]">
+                              {tx.merchant}
+                            </span>
+                            {tx.transfer ? (
+                              <Badge variant="outline" className="text-[10px]">
+                                Transfer
+                              </Badge>
+                            ) : null}
+                          </div>
+                        </td>
+                        <td>
+                          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+                            <CategoryDot
+                              color={tx.color}
+                              className="size-1.5"
+                            />
+                            <span className="truncate">{tx.category}</span>
+                          </span>
+                        </td>
+                        <td className="truncate text-muted-foreground">
+                          {tx.account}
+                        </td>
+                        <td className="text-right">
+                          <Money amount={tx.amount} plaid />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                ))}
+              </table>
+            </PreviewPanel>
+          </PreviewStack>
+        </Page>
+      </PreviewShell>
     </div>
   )
 }
-
-const refiled = [
-  { date: 'Jul 28', amount: '−$112.40' },
-  { date: 'Jul 19', amount: '−$56.08' },
-  { date: 'Jul 11', amount: '−$93.15' },
-]