feat: Page Editor v1.0 - canonical schema, SSR parity, and migration

Major improvements to WooNooW Page Editor system:

Schema & Architecture:
- Canonical section schema with unified sectionSchema.ts
- Normalized feature-grid to use items (not features)
- Standardized default values across all section types
- Schema versioning with automatic migration on read

Backend (PHP):
- Enhanced PlaceholderRenderer with typed output contracts
- Added fallback behavior for empty/invalid dynamic sources
- Added caching support for post data resolution
- New SchemaMigration class for backward compatibility
- New Features class for feature flags
- Enhanced PageSSR with full style support
- Removed controller-level special-casing for related_posts

Frontend (Admin SPA):
- Updated CanvasRenderer with schema-aware transformation
- Enhanced InspectorPanel with canonical schema metadata
- Added new section renderers

Frontend (Customer SPA):
- New section components: BentoCategoryGrid, MarqueeBanner, ProductCarousel, ShoppableImage
- Updated FeatureGridSection for items prop contract

Testing:
- Add PHP tests: SchemaMigrationTest, PlaceholderRendererTest, PageSSRTest
- Add TypeScript tests: schema-integration, feature-grid-regression
- Add parity tests for React vs SSR content matching
- Add CI script: check-schema-drift.mjs
- Add VERIFICATION_CHECKLIST.md

Documentation:
- RELEASE_NOTES-v1.0.md with full release notes
- docs/PAGE_EDITOR_SECTION_SCHEMA_V1.md
- docs/PAGE_EDITOR_SSR_COVERAGE_AUDIT.md

customer-spa/src/layouts/BaseLayout.tsx

@@ -9,6 +9,8 @@ import { LayoutWrapper } from './LayoutWrapper';
 import { useModules } from '../hooks/useModules';
 import { useModuleSettings } from '../hooks/useModuleSettings';
 import { CouponURLHandler } from '../components/CouponURLHandler';
+import { MiniCartDrawer } from '../components/Layout/MiniCartDrawer';
+import { ThemeToggle } from '../components/ThemeToggle';
 
 interface BaseLayoutProps {
   children: ReactNode;
@@ -25,6 +27,7 @@ export function BaseLayout({ children }: BaseLayoutProps) {
   return (
     <>
       <CouponURLHandler />
+      <MiniCartDrawer />
       {/* Map header styles to layouts */}
       {headerSettings.style === 'classic' && <ClassicLayout>{children}</ClassicLayout>}
       {headerSettings.style === 'centered' && <ModernLayout>{children}</ModernLayout>}
@@ -40,7 +43,7 @@ export function BaseLayout({ children }: BaseLayoutProps) {
  * Classic Layout - Traditional ecommerce
  */
 function ClassicLayout({ children }: BaseLayoutProps) {
-  const { cart } = useCartStore();
+  const { cart, openCart } = useCartStore();
   const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
   const storeLogo = (window as any).woonoowCustomer?.storeLogo;
   const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
@@ -54,7 +57,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
   const [searchOpen, setSearchOpen] = useState(false);
 
   const heightClass = headerSettings.height === 'compact' ? 'h-16' : headerSettings.height === 'tall' ? 'h-24' : 'h-20';
-  const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
+  const hasActions = true;
 
   const footerColsClass: Record<string, string> = {
     '1': 'grid-cols-1',
@@ -126,6 +129,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
             {/* Actions - Hidden on mobile when using bottom-nav */}
             {hasActions && (
               <div className={`flex items-center gap-3 ${headerSettings.mobile_menu === 'bottom-nav' ? 'max-md:hidden' : ''}`}>
+                <ThemeToggle />
                 {/* Search */}
                 {headerSettings.elements.search && (
                   <button
@@ -158,7 +162,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
 
                 {/* Cart */}
                 {headerSettings.elements.cart && (
-                  <Link to="/cart" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
+                  <button onClick={openCart} className="font-[inherit] flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors">
                     <div className="relative">
                       <ShoppingCart className="h-5 w-5" />
                       {itemCount > 0 && (
@@ -170,7 +174,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
                     <span className="hidden lg:block">
                       Cart ({itemCount})
                     </span>
-                  </Link>
+                  </button>
                 )}
 
                 {/* Mobile Menu Toggle - Only for hamburger and slide-in */}
@@ -243,6 +247,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
               <ShoppingCart className="h-5 w-5" />
               <span>Shop</span>
             </Link>
+            <ThemeToggle className="flex h-auto w-auto flex-col gap-1 px-4 py-2 text-xs font-medium" />
             {headerSettings.elements.search && (
               <button
                 onClick={() => setSearchOpen(true)}
@@ -253,7 +258,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
               </button>
             )}
             {headerSettings.elements.cart && (
-              <Link to="/cart" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline relative">
+              <button onClick={openCart} className="font-[inherit] flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 relative">
                 <ShoppingCart className="h-5 w-5" />
                 {itemCount > 0 && (
                   <span className="absolute top-1 right-2 h-4 w-4 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center">
@@ -261,7 +266,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
                   </span>
                 )}
                 <span>Cart</span>
-              </Link>
+              </button>
             )}
             {headerSettings.elements.account && (
               user?.isLoggedIn ? (
@@ -398,7 +403,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
  * Modern Layout - Minimalist, clean
  */
 function ModernLayout({ children }: BaseLayoutProps) {
-  const { cart } = useCartStore();
+  const { cart, openCart } = useCartStore();
   const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
   const storeLogo = (window as any).woonoowCustomer?.storeLogo;
   const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
@@ -411,7 +416,7 @@ function ModernLayout({ children }: BaseLayoutProps) {
   const [searchOpen, setSearchOpen] = useState(false);
 
   const paddingClass = headerSettings.height === 'compact' ? 'py-4' : headerSettings.height === 'tall' ? 'py-8' : 'py-6';
-  const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
+  const hasActions = true;
 
   return (
     <div className="modern-layout min-h-screen flex flex-col">
@@ -472,6 +477,7 @@ function ModernLayout({ children }: BaseLayoutProps) {
                     <Search className="h-4 w-4" />
                   </button>
                 )}
+                <ThemeToggle />
                 {headerSettings.elements.account && (
                   user?.isLoggedIn ? (
                     <Link to="/my-account" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
@@ -490,20 +496,23 @@ function ModernLayout({ children }: BaseLayoutProps) {
                   </Link>
                 )}
                 {headerSettings.elements.cart && (
-                  <Link to="/cart" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
+                  <button onClick={openCart} className="font-[inherit] flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors">
                     <ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
-                  </Link>
+                  </button>
                 )}
               </nav>
             )}
 
             {/* Mobile Menu Toggle */}
-            <button
-              className="md:hidden mt-4 flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            >
-              {mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
-            </button>
+            <div className="md:hidden mt-4 flex items-center gap-2">
+              <ThemeToggle />
+              <button
+                className="font-[inherit] flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              >
+                {mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
+              </button>
+            </div>
           </div>
 
           {/* Mobile Menu */}
@@ -554,7 +563,7 @@ function ModernLayout({ children }: BaseLayoutProps) {
  * Boutique Layout - Luxury, elegant
  */
 function BoutiqueLayout({ children }: BaseLayoutProps) {
-  const { cart } = useCartStore();
+  const { cart, openCart } = useCartStore();
   const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
   const storeLogo = (window as any).woonoowCustomer?.storeLogo;
   const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'BOUTIQUE';
@@ -567,7 +576,7 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
   const [searchOpen, setSearchOpen] = useState(false);
 
   const heightClass = headerSettings.height === 'compact' ? 'h-20' : headerSettings.height === 'tall' ? 'h-28' : 'h-24';
-  const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
+  const hasActions = true;
 
   return (
     <div className="boutique-layout min-h-screen flex flex-col font-serif">
@@ -630,6 +639,7 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
                       <Search className="h-4 w-4" />
                     </button>
                   )}
+                  <ThemeToggle className="uppercase tracking-wider" />
                   {headerSettings.elements.account && (user?.isLoggedIn ? (
                     <Link to="/my-account" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
                       <User className="h-4 w-4" /> Account
@@ -646,20 +656,23 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
                     </Link>
                   )}
                   {headerSettings.elements.cart && (
-                    <Link to="/cart" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
+                    <button onClick={openCart} className="font-[inherit] flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors">
                       <ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
-                    </Link>
+                    </button>
                   )}
                 </nav>
               )}
 
               {/* Mobile Menu Toggle */}
-              <button
-                className="font-[inherit] md:hidden flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
-                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              >
-                {mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
-              </button>
+              <div className="md:hidden flex items-center gap-2">
+                <ThemeToggle />
+                <button
+                  className="font-[inherit] flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
+                  onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                >
+                  {mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
+                </button>
+              </div>
             </div>
           </div>
 
@@ -737,7 +750,8 @@ function LaunchLayout({ children }: BaseLayoutProps) {
     <div className="launch-layout min-h-screen flex flex-col bg-gray-50">
       <header className="launch-header bg-white border-b">
         <div className="container mx-auto px-4">
-          <div className={`flex items-center justify-center ${heightClass}`}>
+          <div className={`grid grid-cols-[1fr_auto_1fr] items-center ${heightClass}`}>
+            <div />
             {headerSettings.elements.logo && (
               <Link to="/">
                 {storeLogo ? (
@@ -756,6 +770,9 @@ function LaunchLayout({ children }: BaseLayoutProps) {
                 )}
               </Link>
             )}
+            <div className="flex justify-end">
+              <ThemeToggle />
+            </div>
           </div>
         </div>
       </header>

customer-spa/src/layouts/LayoutWrapper.tsx

@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { useCheckoutSettings, useThankYouSettings } from '../hooks/useAppearanceSettings';
 import { MinimalHeader } from '../components/Layout/MinimalHeader';
 import { MinimalFooter } from '../components/Layout/MinimalFooter';
+import { useTheme } from '../contexts/ThemeContext';
 
 interface LayoutWrapperProps {
   children: ReactNode;
@@ -14,6 +15,7 @@ export function LayoutWrapper({ children, header, footer }: LayoutWrapperProps)
   const location = useLocation();
   const checkoutSettings = useCheckoutSettings();
   const thankYouSettings = useThankYouSettings();
+  const { colorMode } = useTheme();
 
   // Determine visibility settings based on current route
   let headerVisibility = 'show';
@@ -45,7 +47,10 @@ export function LayoutWrapper({ children, header, footer }: LayoutWrapperProps)
   };
 
   return (
-    <div className="layout-wrapper min-h-screen flex flex-col" style={backgroundColor ? { backgroundColor } : undefined}>
+    <div
+      className="layout-wrapper min-h-screen flex flex-col"
+      style={backgroundColor && colorMode !== 'dark' ? { backgroundColor } : undefined}
+    >
       {renderHeader()}
       <main className="flex-1">
         {children}