F1 component kit

The Formula-1 layer of @rj/admin-kit: every component the RJ Laravel admin needs beyond the DTC kit. Same token architecture and vocabulary as brand-005 kit v4; the Laravel theme pins the Satin Lapel navy, adds the 2b ultra density (compact default, comfortable opt-in), the white HQ corner and the 76px labelled rail. Each family page shows every state, both densities, English and 中文, the long-string case, the permission-denied case and the DTC theme, on desktop and on a dedicated phone page.

36families · desktop + phone

63F1 variants specified

17missing components (M01–M17)

86as-is, inherited by name

9DTC-only, not needed

Families

#	Family	Bucket	Covers (inventory ids)	@rj/admin-kit exports	Status
01	Page frame and shell Shell	F1 variant	`page-frame` primitive, `sidebar` designer, `menu-item` designer, `top-bar` designer, `tab-bar` designer	`AppShell`, `RailItem`, `Flyout`, `CrumbSwitcher`	desktop + phone
02	Jobs list and notification centre Shell	Missing · new	M01	`JobsButton`, `JobsDropdown`, `JobRow`, `JobActions`, `JobsSheet`, `NotificationCentre`, `NotificationsSheet`, `JobToast`	desktop + phone
03	Language globe, clock and timezone Shell	Missing · new	M09	`LocaleToggle`, `ClockButton`, `TimezoneSelect`	desktop + phone
04	Date-time display and date range Utilities	F1 variantMissing · new	M08, `date` designer	`DateTime`, `DateRange`	desktop + phone
05	Data table Tables and lists	F1 variant	`data-table` primitive, `data-table` designer, `table-sort` designer, `sticky-header` designer, `row-actions` designer, `column-types` designer, `table-states` designer, `density` designer	`DataTable`, `ColumnTypes`, `InlineEditCell`, `ColumnChooser`	desktop + phone
06	Pagination Tables and lists	F1 variant	`pagination` primitive, `pagination` designer	`Pagination`	desktop + phone
07	Filter bar and saved views Search and pickers	F1 variant	`filter-bar` primitive, `filter-bar` designer, `saved-views` designer	`FilterBar`, `SavedViews`	desktop + phone
08	Bulk action bar · batches of 100 Actions and confirmation	F1 variant	`action-bar` primitive, `action-bar` designer, `bulk-bar` designer	`BulkBar`	desktop + phone
09	Resizable split pane Tables and lists	Missing · new	M06	`SplitPane`	desktop + phone
10	Sortable list Tables and lists	Missing · new	M14	`SortableList`	desktop + phone
11	Tree view Tables and lists	Missing · new	M15	`Tree`	desktop + phone
12	Combobox, cloth picker and ⌘K Search and pickers	F1 variant	`combobox` primitive, `combobox` designer, `cloth-picker` designer, `command-palette` designer	`Combobox`, `ClothPicker`, `CommandPalette`	desktop + phone
13	Money input · wallet before → after Forms and editing	F1 variant	`money-input` primitive, `money-input` designer	`MoneyInput`	desktop + phone
14	Price group (design pricing) Grids and schedules	F1 variant	`price-group` primitive, `price-group` designer	`PriceGroup`	desktop + phone
15	Matrix / grid editor Grids and schedules	Missing · new	M02	`MatrixEditor`	desktop + phone
16	Uploader and import flow Forms and editing	F1 variant	`file-uploader` primitive, `uploader` designer, `review-step` designer	`FileUploader`, `ImportFlow`, `ReviewStep`	desktop + phone
17	Stepper and step rail Forms and editing	F1 variant	`stepper` primitive, `stepper` designer, `step-rail` primitive, `step-rail` designer	`Stepper`, `SectionNav`	desktop + phone
18	Form section, save bar and unsaved guard Forms and editing	F1 variant	`form-section` primitive, `form-section` designer, `save-bar` primitive, `save-bar` designer, `unsaved-guard` designer	`FormSection`, `SaveBar`, `UnsavedGuard`	desktop + phone
19	Bilingual en / 中文 field pair (four labels) Forms and editing	Missing · new	M07	`BilingualField`	desktop + phone
20	Rich-text editor Forms and editing	Missing · new	M16	`RichText`	desktop + phone
21	Cron / schedule builder Forms and editing	Missing · new	M12	`CronBuilder`	desktop + phone
22	Swatch picker (PT colours) Search and pickers	F1 variant	`swatch-picker` primitive	`SwatchPicker`	desktop + phone
23	Measurement grid Grids and schedules	Missing · new	M17	`MeasurementGrid`	desktop + phone
24	Record header and action model Actions and confirmation	F1 variant	`record-header` primitive, `record-header` designer	`RecordHeader`, `SplitButton`	desktop + phone
25	Confirmation ladder Actions and confirmation	F1 variant	`alert-dialog` primitive, `confirm` designer	`ConfirmDialog`	desktop + phone
26	State vocabulary States	F1 variant	`alert` primitive, `alert` designer, `error-state` primitive, `error-states` designer, `not-wired` primitive	`EmptyState`, `ErrorState`, `Banner`, `NotAvailable`	desktop + phone
27	Timeline and audit rows Data and history	F1 variant	`timeline` primitive, `timeline` designer, `audit-row` designer	`Timeline`, `AuditRow`	desktop + phone
28	Diff viewer Data and history	Missing · new	M05	`DiffViewer`	desktop + phone
29	Comment thread (tickets) Data and history	F1 variant	`comment-thread` primitive, `thread` designer	`Thread`, `AiSuggest`	desktop + phone
30	KPI tile and chart frame Data and history	F1 variant	`kpi-tile` primitive, `kpi-tile` designer, `chart-frame` primitive, `chart-frame` designer	`KpiTile`, `ChartFrame`	desktop + phone
31	Prepare → open PDF and cloud print status Actions and confirmation	Missing · new	M04	`DocumentLink`, `PrintJobStatus`	desktop + phone
32	Gallery picker (media library) Media	F1 variant	`gallery-picker` primitive, `picker` designer	`GalleryPicker`	desktop + phone
33	Photo-review lightbox and verdict buttons Media	Missing · new	M10	`PhotoReview`, `VerdictButton`	desktop + phone
34	Gantt Grids and schedules	Missing · new	M03	`Gantt`	desktop + phone
35	JSON / payload viewer Utilities	Missing · new	M11	`JsonViewer`	desktop + phone
36	QR display Utilities	Missing · new	M13	`QrDisplay`	desktop + phone

As-is: 86 components inherited from brand-005 by name

No specimen needed: the DTC kit's own specimens stand (brand-005 /kit/). They change only through tokens. The strip below is the same markup in both themes.

Laravel admin · :root · navy #0E1729 pinned

DraftAvailableManufacturing

Order number or customer⌘KWL

OverviewGarments 3Notes

DTC admin · data-theme=dtc · Midnight green #08120E

DraftAvailableManufacturing

Order number or customer⌘KWL

OverviewGarments 3Notes

accordion primitive

avatar primitive

badge primitive

button primitive

calendar primitive

card-gallery primitive

card primitive

checkbox primitive

cloth-card primitive

collapsible primitive

command primitive

dialog primitive

drawer primitive

dropdown-menu primitive

empty-state primitive

field primitive

input primitive

kbd primitive

key-value primitive

label primitive

list-row primitive

popover primitive

product-card primitive

progress primitive

radio-group primitive

scroll-area primitive

select primitive

separator primitive

sheet primitive

skeleton primitive

sonner primitive

spinner primitive

status-chip primitive

step-mark primitive

switch primitive

table primitive

tabs primitive

tag-input primitive

textarea primitive

thumb primitive

toggle-group primitive

tooltip primitive

button designer

icon-button designer

link-button designer

status-chip designer

status-filter-chip designer

environment-badge designer

toast designer

empty-state designer

skeleton designer

spinner-progress designer

field designer

input designer

textarea designer

select designer

checkbox designer

radio designer

switch designer

segmented designer

tag-input designer

sheet designer

dialog designer

dropdown-menu designer

popover designer

tooltip designer

overlay-layer designer

settings-subnav designer

breadcrumbs designer

tabs designer

page-header designer

list-row designer

product-card designer

cloth-card designer

description-list designer

key-value designer

step-header designer

wizard-action-bar designer

step-validation designer

step-transition designer

help-trigger designer

help-drawer designer

icon designer

avatar designer

kbd designer

thumb designer

Not needed in F1 (DTC-only, 9): confirm-unverified-currency (primitive), kanban (primitive), confirm-unverified-currency (designer), hover-card (designer), place-switcher (designer), payload-frame (designer), gallery (designer), kanban (designer), guided-editor (designer).