docs: Update PROJECT_BRIEF with Settings architecture philosophy

📝 Changes:
- Added Phase 4.5: Settings SPA & Setup Wizard
- Added Section 5: Settings Architecture Philosophy
- Documented 'better wardrobe' approach
- Clarified WooCommerce bone structure respect
- Defined compatibility stance

🎯 Key Principles:
- Read WC structure (don't create parallel system)
- Transform & simplify (better UX)
- Enhance performance (like Orders: 30s → 1-2s)
- Respect ecosystem (auto-support WC-compliant addons)
- No new hooks (listen to WC hooks)

🎨 UI Strategy:
- Generic form builder (standard)
- Custom components (popular gateways)
- Redirect to WC (complex/non-standard)
- Multi-page forms (20+ fields)

Compatibility: 'If it works in WC, it works in WooNooW'

PROJECT_BRIEF.md

@@ -42,6 +42,7 @@ By overlaying a fast React‑powered frontend and a modern admin SPA, WooNooW up
 | **Phase 2** | Checkout Fast‑Path (quote, submit), cart hybrid SPA | Fast checkout pipeline, HPOS datastore |
 | **Phase 3** | Customer SPA (My Account, Orders, Addresses) | React SPA integrated with Woo REST |
 | **Phase 4** | Admin SPA (Orders List, Detail, Dashboard, Standalone Mode) | React admin interface with 3 modes: normal (wp-admin), fullscreen, standalone |
+| **Phase 4.5** | Settings SPA (Store, Payments, Shipping, Taxes, Checkout) | Shopify-inspired settings UI reading WooCommerce structure; Setup Wizard for onboarding |
 | **Phase 5** | Compatibility Hooks & Slots | Legacy addon support maintained |
 | **Phase 6** | Packaging & Licensing | Release build, Sejoli integration, and addon manager |
 
@@ -56,13 +57,33 @@ All development follows incremental delivery with full test coverage on REST end
 - **Architecture:** Modular PSR‑4 autoload, REST‑driven logic, SPA hydration islands.  
 - **Performance:** Read‑through cache, async queues, lazy data hydration.  
 - **Compat:** HookBridge and SlotRenderer ensuring PHP‑hook addons still render inside SPA.  
-- **Packaging:** Composer + NPM build pipeline, `package‑zip.mjs` for release automation.  
-- **Hosting:** Fully WordPress‑native, deployable on any WP host (LocalWP, Coolify, etc).
 
 ---
 
-## 5. Strategic Goal
+## 5. Settings Architecture Philosophy
 
-Position WooNooW as the **“WooCommerce for Now”** — a paid addon that delivers the speed and UX of modern SaaS platforms while retaining the ecosystem power and self‑hosted freedom of WooCommerce.
+WooNooW settings act as a **"better wardrobe"** for WooCommerce configuration:
+
+**Core Principles:**
+1. **Read WooCommerce Structure** — Listen to WC's registered gateways, shipping methods, and settings (the "bone structure")
+2. **Transform & Simplify** — Convert complex WC settings into clean, categorized UI with progressive disclosure
+3. **Enhance Performance** — Direct DB operations where safe, bypassing WC bloat (30s → 1-2s like Orders)
+4. **Respect the Ecosystem** — If addon extends `WC_Payment_Gateway` or `WC_Shipping_Method`, it appears automatically
+5. **No New Hooks** — Don't ask addons to support us; we support WooCommerce's existing hooks
+
+**UI Strategy:**
+- **Generic form builder** as standard for all WC-compliant gateways/methods
+- **Custom components** for recognized popular gateways (Stripe, PayPal) while respecting the standard
+- **Redirect to WC settings** for complex/non-standard addons
+- **Multi-page forms** for gateways with 20+ fields (categorized: Basic → API → Advanced)
+
+**Compatibility Stance:**
+> "If it works in WooCommerce, it works in WooNooW. If it doesn't respect WooCommerce's structure, we can't help."
+
+---
+
+## 6. Strategic Goal
+
+Position WooNooW as the **"WooCommerce for Now"** — a paid addon that delivers the speed and UX of modern SaaS platforms while retaining the ecosystem power and self‑hosted freedom of WooCommerce.
 
 ---

admin-spa/src/routes/Settings/components/SettingsLayout.tsx

@@ -58,8 +58,8 @@ export function SettingsLayout({
         </div>
       )}
 
-      {/* Content - Full width like Orders/Dashboard */}
-      <div className="px-4 py-8 w-full">
+      {/* Content */}
+      <div className="container max-w-5xl mx-auto px-4 py-8">
         {!onSave && (
           <div className="mb-8">
             <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
@@ -68,12 +68,13 @@ export function SettingsLayout({
             )}
           </div>
         )}
+
         {isLoading ? (
           <div className="flex items-center justify-center py-12">
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="space-y-6 max-w-6xl">{children}</div>
+          <div className="space-y-6">{children}</div>
         )}
       </div>
     </div>