Components
Lesson and resource ordering
Use stable item identity and the existing sortable infrastructure to preserve intentional course order.
On this page
Purpose and usage
Use stable item identity and the existing sortable infrastructure to preserve intentional course order.
Anatomy
| Part | Contract |
|---|---|
| Sortable wrapper | Node ref, attributes and transform |
| Handle | Listeners supplied to child |
| Container | DndContext and SortableContext own sorting strategy |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| id | Stable lesson/resource identity |
| children | Receives listeners and isDragging |
| Parent | Owns arrayMove and persistence |
State coverage
| State | Implemented behavior |
|---|---|
| At rest | Original course sequence |
| Dragging | Transform and transition supplied by dnd-kit |
| Committed | Parent updates order |
Interaction and composition
- Never derive persistent identity solely from the displayed index.
- Keep action completion index migration in mind when reordering actions.
- Verify keyboard sensors and touch behavior in the actual parent; a wrapper alone does not establish an equivalent keyboard flow.
Accessibility and readiness
The video-lessons page explicitly configures PointerSensor. SortableLesson forwards attributes and listeners, but complete keyboard and non-drag alternatives need review before a team can claim accessible reordering. No live course order is changed.
Source references
| File | Responsibility |
|---|---|
| src/components/SortableLesson.tsx | Lesson transform and drag listeners |
| src/components/LessonItem.tsx | Nested resource ordering |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1