F1 component kit/Data and history/Diff viewerDesktop

Diff viewer

Missing · new28 · diff-viewer

Before → after at field level (conflict compare, bulk-hub preview) and line level (email template versions, with Revert). Side by side or inline; inline only on phone.

Covers: M05. Exports: DiffViewer.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn
Phone: inline mode only.

States

5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

field diff · conflict compare
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn
Phone: inline mode only.
line diff · template v7 → v8

Order shipped · v7 → v8

6Hi {{ retailer_name }},
7−Your order {{ order_id }} has shipped.
7+Your order {{ order_id }} left Shanghai today.
8+Tracking: {{ tracking_url }}
9Thanks, RJ
+2 −1 lines
bulk preview
Will change48
Unchanged211
Blocked2
DesignSupplier nowAfter apply
1287 · Notch lapelSYCSQF
1288 · Peak lapelSYCSQF
1291 · Shawl lapel—SQF
no differences

No differences

v7 and v8 are identical.

loading

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn
Phone: inline mode only.

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn
Phone: inline mode only.
中文 · lang=zh-Hans
字段对方 · K. Osei 14:29你的（未保存）
供应商SYCSQF
面料附加 (cm)12.515
在批量中心显示开开
手机：仅内联模式。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierShanghai Yongchang Tailoring Accessories & Trims Co. (primary)Suzhou Qianfeng Fabric & Lining Wholesale (backup promoted to primary)
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn
Phone: inline mode only.
permission denied

Not available to your role

Your role is missing manage email templates. Nothing here is hidden by mistake: the server sends only what you can do.

Phone: inline mode only.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
DiffViewer · @rj/admin-kit
Props
mode fields|lines · before · after · labels · layout side|inline
States
diff · identical · loading · denied
shadcn / Radix
Tabs (layout)
Package underneath
react-diff-viewer-continued (lines) · diff (fields)
Accessibility
removed / added are announced (“removed 104, added 106”), not colour only
API operations
admin.email-templates.versions.show / .revert · admin.designs.bulk-hub.preview · admin.pt-colors.import.preview · admin.accounts.bulk-permissions (dry_run)
Phone variant
inline only