F1 component kit/States/State vocabularyDesktop

State vocabulary

F1 variant26 · states

One vocabulary for every page (gate-checked like brand-005, PL-066): empty, filtered-empty, loading, not available to your role, the API error taxonomy (403 · 404 · 409 · 422 · 429 · 5xx with a request id), offline, stale, partial data, needs-backend. Hide what a role can't do; use the denied state only where hiding would confuse.

Covers: alert primitive, alert designer, error-state primitive, error-states designer, not-wired primitive. Exports: EmptyState, ErrorState, Banner, NotAvailable.

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.

Something went wrong on our side

The server answered 500. Your work on this page is kept.

request id 9f3c2a71-4e0b · 06:41:12 UTC

States

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

error 500 + request id

Something went wrong on our side

The server answered 500. Your work on this page is kept.

request id 9f3c2a71-4e0b · 06:41:12 UTC

empty · first use

No tickets yet

Retailers open tickets from their app; staff can open one for a shop.

filtered empty

Nothing matches these filters

Brand: Atelier North · Status: On Hold

loading

not available to your role

Not available to your role

This page needs view pricing. The menu never links here for your role; you arrived by a pasted link.

403 mid-session

You can't do that

The server refused (403): your role lost edit orders since the page loaded. Nothing changed.

request id 9f3c2a71-4e0b · 06:41:12 UTC

404

Order 4419 doesn't exist

It may have been a draft that was deleted, or a typo.

409 conflict

422 field summary

429 throttled

offline

stale

partial data

needs backend

success

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

Something went wrong on our side

The server answered 500. Your work on this page is kept.

request id 9f3c2a71-4e0b · 06:41:12 UTC

English · 中文

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

Something went wrong on our side

The server answered 500. Your work on this page is kept.

request id 9f3c2a71-4e0b · 06:41:12 UTC

中文 · lang=zh-Hans

服务器出错了

服务器返回 500，本页内容已保留。

request id 9f3c2a71-4e0b · 06:41:12 UTC

Long string · permission denied

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

long string

Something went wrong on our side

The server answered 500. Your work on this page is kept.

request id 9f3c2a71-4e0b-4d0c-a7a1-2b6f0c1d9e33 · POST /api/v1/admin/orders/4521/cloud-print · 06:41:12 UTC

permission denied

Not available to your role

This page needs view pricing. The menu never links here for your role; you arrived by a pasted link.

Contract

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

Export: EmptyState · @rj/admin-kit
Props: icon · title · body · action
Variants: first-use · filtered · zero
shadcn / Radix: none
Accessibility: h2-level title

Export: ErrorState · @rj/admin-kit
Props: status 403|404|409|422|429|5xx|offline · requestId · retry
States: per status
Package underneath: react-error-boundary (per panel)
Accessibility: role=alert for blocking errors

Export: Banner · @rj/admin-kit
Props: kind info|warn|bad|ok|lock · title · body · actions · thin
Variants: stale · offline · partial · conflict · needs-backend
Package underneath: react-query onlineManager + dataUpdatedAt (stale / offline)

Export: NotAvailable · @rj/admin-kit
Props: permissions[]
States: page · inline · chip
Accessibility: names the missing permission; never a dead button
API operations: admin.me.show (permissions[])