Docs / Data and layout / Bounding Box Citations
Bounding Box Citations
Review extracted values against source bounding box citations with form fields and JSON diffing.
Bounding Box Citations provides field-level cards for comparing extracted values with source PDF bounding boxes. Use it when reviewers need to inspect citations, correct values, and optionally compare against expected output.
Statement period
statement_period
string
Date range covered by the bank statement.
Actual
Jan 1-31, 2026
Expected
Transactions
transactions
array
Date
Description
Amount
Category
Merchant
Tags
1
2026-01-03
ACH CREDIT PAYROLL
4250
Deposit
3 fields
2 items
2
2026-01-12
POS PURCHASE GROCERY MART
-86.42
Debit
3 fields
2 items
Date
Description
Amount
Category
Merchant
Tags
1
2026-01-03
ACH CREDIT PAYROLL
4250
Deposit
3 fields
2 items
2
2026-01-12
POS PURCHASE GROCERY MART
-68.42
Debit
3 fields
3 items
Ending balance
ending_balance
number
Final account balance at the end of the statement period.
Actual
12840.18
Expected
Overdraft protection enabled
overdraft_protection_enabled
boolean
Whether overdraft protection is enabled for the account.
Actual
false
Expected
Account details
account_details
object
Properties 5 fields
Holder name
account_details.holder_name
string
Actual
Jordan Lee
Expected
Account last four
account_details.account_last_four
string
Actual
4821
Expected
Account type
account_details.account_type
string
Actual
Checking
Expected
Mailing address
account_details.mailing_address
object
Properties 3 fields
Line 1
account_details.mailing_address.line_1
string
Actual
42 Market Street
Expected
City
account_details.mailing_address.city
string
Actual
Brooklyn
Expected
State
account_details.mailing_address.state
string
Actual
NY
Expected
Linked accounts
account_details.linked_accounts
array
Nickname
Last four
1
Operations reserve
1842
Nickname
Last four
1
Operations reserve
1842
2
Payroll sweep
9174
1 {
1 {
2 "statement_period": "Jan 1-31, 2026",
2 "statement_period": "January 1-31, 2026",
3 "transactions": [
3 "transactions": [
4 {
4 {
5 "date": "2026-01-03",
5 "date": "2026-01-03",
19 {
19 {
20 "date": "2026-01-12",
20 "date": "2026-01-12",
21 "description": "POS PURCHASE GROCERY MART",
21 "description": "POS PURCHASE GROCERY MART",
22 "amount": -86.42,
22 "amount": -68.42,
23 "category": "Debit",
23 "category": "Debit",
24 "merchant": {
24 "merchant": {
25 "name": "Grocery Mart",
25 "name": "Grocery Mart",
26 "city": "Brooklyn",
26 "city": "Brooklyn",
27 "risk_level": "medium"
27 "risk_level": "low"
28 },
28 },
29 "tags": [
29 "tags": [
30 "card",
30 "card",
31 "groceries"
31 "groceries",
32 "needs_review"
32 ]
33 ]
33 }
34 }
34 ],
35 ],
35 "ending_balance": 12840.18,
36 "ending_balance": 12858.18,
36 "overdraft_protection_enabled": false,
37 "overdraft_protection_enabled": true,
37 "account_details": {
38 "account_details": {
38 "holder_name": "Jordan Lee",
39 "holder_name": "Jordan Lee",
39 "account_last_four": "4821",
40 "account_last_four": "4821",
40 "account_type": "Checking",
41 "account_type": "Premier Checking",
41 "mailing_address": {
42 "mailing_address": {
42 "line_1": "42 Market Street",
43 "line_1": "42 Market Street",
43 "city": "Brooklyn",
44 "city": "New York",
44 "state": "NY"
45 "state": "NY"
45 },
46 },
46 "linked_accounts": [
47 "linked_accounts": [
47 {
48 {
48 "nickname": "Operations reserve",
49 "nickname": "Operations reserve",
49 "last_four": "1842"
50 "last_four": "1842"
51 },
52 {
53 "nickname": "Payroll sweep",
54 "last_four": "9174"
50 }
55 }
51 ]
56 ]
52 }
57 }
Bounding Box Citations block
The panel composed with the PDF Viewer: focusing a field highlights its bounding box and scrolls the page there; hovering a transaction row highlights its line; clicking a box focuses its field. The sample bank statement and its citations are upstream's block demo data (extend-hq/ui, MIT).
Loading PDF…
Active citation: none
Useful behaviors
- Actual and expected values displayed side by side for each schema field when
showExpectedis enabled. - Array values rendered as grids, including drill-down for nested arrays and objects, with the Actual and Expected grids kept in sync.
- Input controls selected from the JSON schema property type.
- Object schema properties rendered as nested cards in the scrollable form.
- Per-field undo and Set to NULL actions when
showExpectedis enabled. - Form and JSON diff views for the same reviewed output state when
showExpectedis enabled.
API Reference
HumanReviewPanel
| Prop | Type | Default |
|---|---|---|
fields | ReviewField[] | sample fields |
bind:values | JsonObject | each field's expected |
activeFieldKey | string | - |
class / className | string | - |
onFieldFocus | (field: ReviewField) => void | - |
onLocationHover | (location?: ReviewLocation) => void | - |
resolveLocation | (metadataPath: string) => ReviewLocation | undefined | - |
resolveArrayItemMetadataPath | (path, rowIndex, rowValue) => string | undefined | - |
showExpected | boolean | true |
isDark / onIsDarkChange | boolean / (isDark: boolean) => void | false |
ReviewField
| Prop | Type | Required |
|---|---|---|
key | string | Yes |
schema | ReviewFieldSchema | Yes |
actual | JsonValue | Yes |
expected | JsonValue | Yes |
location | { page: number; area: HighlightArea } | No |
Differences from upstream
themeis replaced by parent-controlledisDark+onIsDarkChange; neither component renders its own theme control.classandclassNameare both accepted and merged.- Array grids are a Svelte DOM table instead of glide-data-grid: same columns, row numbers, double-click / Enter / typing to edit, drill-in and mirrored selection, but single-cell selection only (no range or drag selection). No
#portalelement is needed. - The JSON diff is a built-in line diff instead of
@pierre/diffs: split view with collapsed unchanged lines, no word-level highlights. - Added
bind:valueson the panel to read the edited output (upstream keeps it internal although its usage sample passesvalues). - Panel height comes from the
--human-review-panel-heightCSS variable (default 560px) instead of aclassNameheight utility. - Block (
HumanReviewBlock, exported also asBoundingBoxCitations): every located field gets a faint clickable box, so clicking a box focuses its field (upstream draws only the active box). - Block:
srcis the primary PDF prop and upstream'sfileis an alias; addedbind:activeFieldKey,onActiveFieldChange,onFieldFocus,onLocationHover,bind:values,fileName, andheight. - Block: the PDF renders on the shared PdfViewer; scroll-to-area is computed from the rendered page slots because PdfViewer has no
scrollToPageAreahandle. - Block: the resizable split stacks vertically below 900px instead of switching to a vertical resizable layout.
- Port-only exports: the overlay helpers
boxesForPage,formatCitationValue,getCitationLocation, plus the typesBoundingBoxCitationsProps,HumanReviewPanelProps,CitationBox,ArrayNestedView,ArrayReviewSide. Upstream'sHumanReviewThemetype is not exported becausethemeis replaced byisDark.