VIMĀNA | Sovereign Indian Journeys

Advanced UX Architecture & Edge Cases: Accessible Multi-Step Travel Booking

An enterprise-grade, heavily validated multi-step travel booking system engineered specifically to score 100% on Lighthouse Accessibility (WCAG 2.2 AAA/AA), maintain Zero Cumulative Layout Shift (CLS = 0), and deliver offline resilience, all wrapped in an ultra-luxurious, royal Indian haute-hospitality aesthetic.

---

⚜️ Design Influences & Aesthetics

• Vita Travel (vita-travel.webflow.io): Editorial magazine card deck, 4–7 step progression numbers (01 STEP, 02 STEP, etc.), verified patron metrics, hairline geometric accents, and "Combine Retreat + Stay + Transfers + Extras" curation flow.
• Flyward (flyward.com): High-performance executive concierge feel, high-contrast accessible focus styling, crisp input grouping with zero layout jitter, and smooth Lenis-style physics.
• Supreme Luxury (supreme-luxury.com): Tri-font luxury typographic hierarchy (Baskervville editorial serif italics, Syne avant-garde display headings, and Inter high-legibility UI body), imperial color palette (Obsidian, Sovereign Gold, Saffron, and Vedic Forest Emerald).
• Node-Graph Design Token Studio (User Reference): Collapsible A11y & Design Token HUD (Alt + D or floating button) showcasing live color ramps, WCAG APCA/AAA contrast matrix, cubic-bezier easing canvas, state machine nodes, and screen reader live speech mirror.

---

🏛️ 7-Step Finite State Machine Workflow

1. 01 STEP: Choose Expedition — Curated royal Indian journeys across Rajasthan, Kerala, Ladakh, Ranthambore, Varanasi, and Andaman with region filters, UNESCO badges, and trusted client statistics.
2. 02 STEP: Dates & Climate — Accessible WAI-ARIA date picker grid with Indian climate advisories (Monsoon window alerts, peak royal season notices, minimum night guards).
3. 03 STEP: Suites & Guests — Royal suite tiers (Mewar Pavilion, Heritage Haveli, Sovereign Presidential Wing), ARIA spinbutton guest steppers, and physical/sensory accessibility accommodations (Wheelchair ramps, ground-floor priority, tactile audio guides, braille dossiers).
4. 04 STEP: Bespoke Curations — Private Pilatus PC-24 aircraft charter hops, Rolls-Royce Ghost chauffeurs, Master Vaidya Ayurvedic consultations, and Himalayan Deodar carbon offset pledges.
5. 05 STEP: Patron KYC — Strict Indian regulatory validation:
   • Indian PAN Card ([A-Z]{5}[0-9]{4}[A-Z]{1}) with real-time uppercase conversion for RBI luxury compliance.
   • Indian Mobile (+91 with 10-digit telecom operator check).
   • Corporate GSTIN (15-character state-coded format for corporate tax invoices).
   • Dynamic Guest Manifest based on adult patron party size.
   • Zero-CLS reserved error slots preventing layout jitter when errors trigger.
6. 06 STEP: Vault Review — Itemized sovereign invoice with multi-currency toggle (INR ₹ with Lakhs/Crores grouping, USD $, EUR €, GBP £), Indian GST breakdown (CGST 9% + SGST 9% / IGST 18%), 1% National Heritage Cess, and simulated payment gateways (UPI Sovereign Direct, Net Banking, Centurion Card).
7. 07 STEP: Confirmed Pass — Sovereign reference ID generator, downloadable .ics calendar invitation, printable boarding pass, and offline vault caching notice.

---

♿ Accessibility & Edge Case Engineering

• 100% Lighthouse A11y & WCAG 2.2 AAA Target:
  • Semantic HTML5 landmarks (<header role="banner">, <main id="main-content">, <nav aria-label="...">, <footer role="contentinfo">, <aside>).
  • Dual aria-live screen reader announcer engine (polite for async state/currency/pricing updates; assertive for critical errors).
  • High-contrast visible focus rings (:focus-visible) on all interactive controls.
  • Modal focus traps restoring previous focus on close.
  • Roving tabindex for keyboard navigation across card decks, tabs, and calendar days.
  • Full keyboard shortcuts (Alt + D for Diagnostic HUD, Escape to dismiss overlays, Home/End/Arrows in calendar).
  • Accessibility Preference Center: AAA High Contrast mode, Daylight Parchment mode, fluid font scale (100%, 125%, 150%), reduced motion toggle, dyslexia font mode, and Web Audio acoustic feedback cues.
• Zero Cumulative Layout Shift (CLS = 0):
  • Strict pre-allocated image containers with fixed CSS aspect-ratio and contain: layout style.
  • Reserved minimum-height slots for form validation errors to prevent content push.
  • Font fallback metric matching for web font swap.
• Offline Resilience & PWA:
  • Service Worker (/sw.js) with Cache API for offline shell and asset caching.
  • localStorage reactive draft auto-saving with live timestamp.
  • Real-time navigator.onLine monitoring with accessible offline warning drawer.

---

🚀 Running the Project

# Install dependencies
npm install

# Start Vite development server
npm run dev

# Run full test suite (170 tests across 3 suites)
npm test

# Run individual verification suites
node test/verify-booking.js
node test/verify-25-features.js
node test/verify-upgrade.js

# Build production bundle
npm run build

---

⬆️ Platform Upgrade (2026)

See ARCHITECTURE.md for the layered design (core / state / services / components / data), FSM guard table, and end-to-end booking data flow.

• Central store v2 (src/js/state/store-v2.js): action-based updates (SELECT_EXPEDITION, SET_GUEST_COUNT, APPLY_PROMO_CODE, …), derived pricing/tax selectors, undo, v1→v2 draft migration, offline action queue, HUD state inspector.
• Config-driven policy (src/js/data/business-config.js): CGST/SGST/IGST/cess, seasonal multipliers, blackout dates, refund tiers, loyalty thresholds, promo codes, insurance rates, charter windows — no magic numbers in components.
• 25+ features with validation + tests (src/js/validation/extended-rules.js, src/js/services/pricing-extensions.js, src/js/services/live-services.js, test/verify-upgrade.js): multi-leg trips, compare mode, split pay, promos, refunds, insurance, state-wise tax, signature, passport/visa, minor consent, emergency/medical, doc upload, wishlist, loyalty, referrals, reviews, family manifest, live scarcity, waitlist, charter slots, suite map, abandoned recovery, notifications, ops analytics, offline queue UI, en/hi i18n, voice guidance, checklist, countdown, PDF/QR export seam, pricing experiment flag.
• Live behaviors: currency refresh (stale-hold offline), surge pricing, availability ticks, climate feed, social proof, concierge chat, waitlist claims, sync status bar.
• Responsive: src/css/responsive.css (mobile-first 320px→ultra-wide, fluid type, 44px targets, container queries, CLS = 0 reserved slots). Steps lazy-load via core/lazy-steps.js.
• Quality: withErrorBoundary + logEvent, FeatureFlags, CI (.github/workflows/ci.yml) running all three suites + build on every push/PR.