Prompt 01: State Management (Zustand)

Goal: Create a robust state management system for the Tarot Reading process, porting the web app's cardPickerModalStore.

Design Requirements:

• Technology: zustand (standard for React Native/Expo).
• Core State:
  • selectedCards: Array of indices of cards currently selected by the user.
  • requiredCards: Number of cards needed for the specific spread.
  • spreadData: Object containing spreadId, positions, cardsCount, userSelectionCount (for Yes/No modes).
  • phase: 'picking' | 'transitioning' | 'revealing' | 'loading'.
  • deck: The current randomized deck of 78 cards.
  • flippedCards: Array of indices of cards that have been flipped to reveal.
  • resolvedCards: The finalized reading data (cardId, positionIndex, isReversed) to send to the API.
• Actions:
  • toggleCard(index): Select/deselect a card. Handle the constraint logic (max cards allowed).
  • shuffleDeck(): Re-randomize the 78-card deck.
  • flipCard(index): Record a card flip interaction.
  • setPhase(phase): Update the reading state phase.
  • setResolvedCards(cards): Store the final reading result.
  • reset(): Reset state to start a new reading.

Code Specs:

• Use TypeScript for strict typing.
• Ensure the store is serializable where necessary, or structure it to avoid issues with React Native's bridge.
• Include a persist middleware? (Optional: maybe not for active readings, as they should be fresh).

Context:

• The web app uses a useCardPickerModalStore.
• We need to match the logic where Yes/No spreads have different selection counts vs. total cards in the spread.

Deliverable:

• src/stores/cardPickerStore.ts