F1 component kit/Tables and lists/Sortable listPhone

Sortable list

Missing · new10 · sortable-list

Drag to reorder with a keyboard twin (Space to lift, ↑↓ to move, Space to drop), then a saved state with Undo or an error that restores the old order. 23 reorder operations need it (Q13).

Covers: M14. Exports: SortableList.

Whole page:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

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

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

States

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

default

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

dragging · drop gap

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

keyboard move

1Jacket length

2Shoulders

3Chestmoving · ↑↓ then Space

4Stomach

5Sleeve length

6Bicep

saving

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

Saving order…

saved · undo

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

Order savedUndo

save failed · restored

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

Couldn’t save: the list changed. Order restored.

Density

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

compact · default · data-density=compact

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

comfortable · data-density=comfortable

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

English · 中文

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

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

中文 · lang=zh-Hans

1衣长

2肩宽

3胸围

4腹围

5袖长

6上臂围

Long string · permission denied

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

long string

1Jacket length

2Shoulders (measured seam to seam across the back, over the jacket the customer arrived in)

3Chest

4Stomach

5Sleeve length

6Bicep

permission denied

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

Read only · reorder needs edit default measurements

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

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

DTC admin · data-theme=dtc

1Jacket length

2Shoulders

3Chest

4Stomach

5Sleeve length

6Bicep

Contract

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

Export: SortableList · @rj/admin-kit
Props: items · onReorder (ids in order) · disabled
States: idle · dragging · keyboard-moving · saving · saved · error
shadcn / Radix: none (list-row)
Package underneath: @dnd-kit/core + @dnd-kit/sortable (pointer, keyboard, touch sensors)
Accessibility: dnd-kit announcements: “Picked up Chest. Position 3 of 6.”
API operations: admin.default-measurements.reorder · admin.fabrics.reorder · admin.product-quality-checks.reorder · admin.photo-market.photos.reorder · admin.designs.sort (23 ops)
Phone variant: long-press to drag, or ↑ / ↓ buttons