F1 component kit/Data and history/Diff viewerPhone

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:CompactComfortableLaravel · navyDTC · midnight green
AnatomyStatesDensityEN · 中文Edge casesContract

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

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
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

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn
comfortable · data-density=comfortable
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn

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
中文 · 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
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.

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn
DTC admin · data-theme=dtc
FieldTheirs · K. Osei 14:29Yours (unsaved)
SupplierSYCSQF
Fabric Surcharge (cm)12.515
Show in Bulk HubOnOn

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