How would you architect a multi-step Svelte wizard with Stores?

WHAT THIS TESTS: This question tests whether you understand Svelte's reactive store contract beyond simple toggles. The interviewer wants to see if you can model complex form state that survives component unmounting, coordinate validation across discrete steps, and prevent navigation until business rules are satisfied. It also surfaces whether you treat stores as plain state buckets or as reactive state machines with derived outputs.

A GOOD ANSWER COVERS: First, use a single centralized writable or custom store that contains the entire wizard payload, keyed by step identifier so data persists when steps unmount. Second, create derived stores for each step that compute isValid and touched states from the central payload, keeping components declarative. Third, implement a navigation guard function that runs step-specific validation imperatively before advancing the active step index. If validation is async, await it and set an isValidating flag to disable the Next button. Fourth, expose helper methods on the store such as validateStep, resetStep, and setInitialValues so the wizard can be reused. Fifth, mention that libraries like Felte approach this by offering a createForm configuration with built-in stores for data, errors, touched, and isValid, which can be adapted for multi-page flows.

COMMON WRONG ANSWERS: Storing each step in a separate unrelated writable store loses the unified snapshot needed for final submission and makes cross-step validation impossible. Validating only on the final submit button ignores the requirement to block progression at intermediate steps. Using component-level let variables instead of stores means state vanishes when the user navigates backward. Another red flag is reading derived store values imperatively inside event handlers without subscribing, which breaks reactivity.

LIKELY FOLLOW-UPS: How would you handle a step that conditionally appears based on earlier answers? What happens if the user refreshes the page mid-wizard? How do you rollback state if the final API call fails after step three passed validation? Would you use URL route params for step state or keep it in memory only?

ONE CONCRETE EXAMPLE: Imagine a three-step checkout with shipping, payment, and review. The store shape is an object containing shipping address, payment card, and review terms. A derived store called shippingValid checks that the address is non-empty and the card is formatted. The Next button on the shipping page calls await wizard.validateStep for shipping. If the errors store is empty, the activeStep index increments and the payment component mounts with its fields still pristine. If the user clicks Back, the shipping data remains in the central store and the step stays valid.