F1 component kit/Forms and editing/Bilingual en / 中文 field pair (four labels)Desktop

Bilingual en / 中文 field pair (four labels)

Missing · new19 · bilingual-field

The designs truth: every name is stored four times — System (English), System (Chinese), Printer (English), Printer (Chinese) — each required. Side by side on desktop, a “Chinese missing” flag (the factory bill would print English), tabs on phone.

Covers: M07. Exports: BilingualField.

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.

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

States

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

filled

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

focus

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

Chinese missing

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

required empty

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

suggest Chinese (vision only)

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

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

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

English · 中文

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

en

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

中文 · lang=zh-Hans

系统名平驳头打印名平驳头手机：一次一种语言（标签切换）。

Long string · permission denied

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

long string

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

permission denied

System nameNotch lapelPrinter nameNOTCH LAPELPhone: one language at a time (tabs).

Contract

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

Export: BilingualField · @rj/admin-kit
Props: value {en, cn} · printer {en, cn} (four-label mode) · required · suggest (optional op)
States: filled · focus · cn-missing · required-error · read-only
shadcn / Radix: Label + Input ×2 (×4) · Tabs on phone
Package underneath: react-hook-form · zod
Accessibility: each input is labelled with its language; lang=zh-Hans on the cn input
API operations: admin.designs.update (name, printer_name) · admin.design-components.* · admin.suppliers.* · admin.product-quality-checks.* · admin.vision-checks.failure-reasons.translate-suggest
Phone variant: tabs, one language at a time