Path

The path is the course, laid out like a game board. Every stop is a round key that stands on a lip and presses down into it, set on a gentle wave down the screen. Done stops wear their unit's color with up to three stars under them, the current one is larger, ringed by how far into it you are, under a Start bubble that bounces, and locked ones wait in grey. Each unit opens on a banner in its own color with a Guide key for its tips, and the banner of the unit you're in pins under the top bar, then hands over to the next one as you scroll past. Pip, the coach, stands on the far side of the wave beside the current stop and says a tip when you tap it. Press any stop and a card pops from it with the lesson's title, its place in the unit and Start; done stops offer a practice run and locked ones say what opens them. The top bar keeps the course flag, the streak and the day's XP in view.

Notes

• LessonPath(units:flag:streak:xp:xpGoal:onStart:) draws a course of [PathUnit]. A unit has its number, title, block (an index into the theme's blocks, so its banner, stops and card share one color), the tips its Guide shows and its PathLessons in order. A lesson has a kind (.lesson, .practice, or .checkpoint for the unit's last stop), a status (.done(stars:), .current(progress:) or .locked) and its xp.
• onStart gets the stop a person started from its card. Pass onFlag or onStreak to make those chips buttons (to switch course or open the streak), and onGuide to replace the built-in Guide sheet with your own.
• Stops, chips, banners and cards are built on SPTactileStyle and spTactileSurface from the design system and the coach is SPBuddy, so the path takes the theme's blocks, type, radii and motion. Flags are stripes drawn from the theme's status colors, so they follow the preset too. Confetti brands scatter a few sprinkles in the margins.
• The path scrolls to the current stop when it appears and follows it when a finished lesson moves it on. The current stop gets extra room above it, so its Start bubble clears the stars of the stop above wherever the wave puts them. Banners are pinned section headers, so the handover between units is the system's own. A finished course ends on a trophy stop with a confetti burst, and isLoading shows grey stops and banners while the course loads.
• VoiceOver reads the stops in order as buttons ("Lesson 3, Asking directions", "Current"; "Done, 2 of 3 stars"; "Locked"), the banners as headers and each chip as one value. An open card holds VoiceOver until it closes (the escape gesture closes it), and the stops under it step aside so a touch reaches its Start. Every target is at least 44pt, and at accessibility text sizes the Guide key keeps only its icon so the unit's title has room.
• Reduce Motion stops the Start bubble's bounce and the coach's bob, turns the springs into short fades and skips the burst.
• PathFlagDisc(flag:) and PathFlame() are public, for a course picker or a streak elsewhere in your app.
• LessonPathExample at the end of LessonPath.swift is the screen in the preview: a Spanish course in three units, the second under way, with Parla's chunky tab bar. Copy it as a starting point.