storefront-layouts 1.0.0

package/dist/preview/PreviewRouter.js

@@ -0,0 +1,332 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, Suspense } from 'react';
+import { isBookingAgendaStoreRoot } from '../lib/layout-route-utils.js';
+import { useStore } from '../lib/store-context.js';
+import dynamic from 'next/dynamic';
+import { BaseStoreLayout } from '../layouts/shared/components/BaseStoreLayout.js';
+import { normalizePreviewSegment } from './route-audit.js';
+const dynamicPage = (importFn) => dynamic(importFn, {
+    loading: () => (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50/50 backdrop-blur-sm", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 border-4 border-blue-600/20 border-t-blue-600 rounded-full animate-spin" }), _jsx("p", { className: "text-sm font-medium text-gray-500 animate-pulse", children: "Loading experience..." })] }) })),
+    ssr: false,
+});
+const PAGES = {
+    CartPage: dynamicPage(() => import('../index').then((mod) => mod.CartPage)),
+    WishlistPage: dynamicPage(() => import('../index').then((mod) => mod.WishlistPage)),
+    CheckoutPage: dynamicPage(() => import('../index').then((mod) => mod.CheckoutPage)),
+    AccountPage: dynamicPage(() => import('../index').then((mod) => mod.AccountPage)),
+    TeamPage: dynamicPage(() => import('../index').then((mod) => mod.TeamPage)),
+    PortfolioPage: dynamicPage(() => import('../index').then((mod) => mod.PortfolioPage)),
+    HelpCenterPage: dynamicPage(() => import('../index').then((mod) => mod.HelpCenterPage)),
+    ShippingReturnsPage: dynamicPage(() => import('../index').then((mod) => mod.ShippingReturnsPage)),
+    TrackOrderPage: dynamicPage(() => import('../index').then((mod) => mod.TrackOrderPage)),
+    TermsPage: dynamicPage(() => import('../index').then((mod) => mod.TermsPage)),
+    PrivacyPolicyPage: dynamicPage(() => import('../index').then((mod) => mod.PrivacyPolicyPage)),
+    CookiePolicyPage: dynamicPage(() => import('../index').then((mod) => mod.CookiePolicyPage)),
+    SizeGuidePage: dynamicPage(() => import('../index').then((mod) => mod.SizeGuidePage)),
+    StyleGuidePage: dynamicPage(() => import('../index').then((mod) => mod.StyleGuidePage)),
+    FeatureDisabledPage: dynamicPage(() => import('../index').then((mod) => mod.FeatureDisabledPage)),
+    GenericPageWrapper: dynamicPage(() => import('../index').then((mod) => mod.GenericPageWrapper)),
+    ElectronicsCategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsCategoriesPage)),
+    ElectronicsPageWrapper: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsPageWrapper)),
+    /** Full electronics storefront listing (matches storefront-app /products for layout `electronics`). */
+    ElectronicsProductsListing: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsProductsPage)),
+    ElectronicsGridProductsPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridProductsListingPage)),
+    ElectronicsGridCategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridCategoriesListingPage)),
+    ServiceDetailPage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalServiceDetailPage)),
+    SubscriptionPage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalSubscriptionPage)),
+    MotivationalPageWrapper: dynamicPage(() => import('../index').then((mod) => mod.MotivationalPageWrapper)),
+};
+const LAYOUT_PAGE_MAP = {
+    food: {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.FoodHomePage)),
+        ProductsPage: dynamicPage(() => import('../index').then((mod) => mod.FoodProductsPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.FoodProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.FoodCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.FoodCategoriesPage)),
+        MenuPage: dynamicPage(() => import('../index').then((mod) => mod.FoodMenuPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.FoodAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.FoodContactPage)),
+    },
+    'food-modern': {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.FoodHomePageModern)),
+        ProductsPage: dynamicPage(() => import('../index').then((mod) => mod.FoodModernProductsPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.FoodModernProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.FoodModernCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.FoodModernCategoriesPage)),
+        MenuPage: dynamicPage(() => import('../index').then((mod) => mod.FoodModernMenuPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.FoodModernAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.FoodModernContactPage)),
+    },
+    clothing: {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.ClothingHomePage)),
+        ProductsPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingProductsPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingCategoriesPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingContactPage)),
+    },
+    'clothing-minimal': {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.ClothingHomePageMinimal)),
+        ProductsPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingMinimalProductsPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingMinimalProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingMinimalCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingMinimalCategoriesPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingMinimalAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.ClothingMinimalContactPage)),
+    },
+    booking: {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.BookingHomePage)),
+        BookPage: dynamicPage(() => import('../index').then((mod) => mod.BookingBookPage)),
+        ServicesPage: dynamicPage(() => import('../index').then((mod) => mod.BookingServicesPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.BookingProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.BookingCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.BookingCategoriesPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.BookingContactPage)),
+    },
+    'booking-agenda': {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.BookingHomePageAgenda)),
+        BookPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAgendaBookPage)),
+        ServicesPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAgendaServicesPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAgendaProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAgendaCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAgendaCategoriesPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAgendaAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.BookingAgendaContactPage)),
+    },
+    electronics: {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsHomePage)),
+        ProductsPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsProductsListingPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsCategoriesListingPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsContactPage)),
+    },
+    'electronics-grid': {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsHomePageGrid)),
+        ProductsPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridProductsListingPage)),
+        ProductDetailPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridProductDetailPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridCategoryPage)),
+        CategoriesPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridCategoriesListingPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.ElectronicsGridContactPage)),
+    },
+    'motivational-speaker': {
+        HomePage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalHomePage)),
+        ProductsPage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalProductsPage)),
+        CategoryPage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalCategoryPage)),
+        ServicesPage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalServicesPage)),
+        AboutPage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalAboutPage)),
+        ContactPage: dynamicPage(() => import('../index').then((mod) => mod.MotivationalContactPage)),
+    },
+};
+export function PreviewRouter({ storeConfig: initialStoreConfig, route, onNavigate }) {
+    const { store } = useStore();
+    const storeConfig = store || initialStoreConfig;
+    const pageFeatures = storeConfig.pageFeatures || {};
+    const path = route.startsWith('/') ? route : `/${route}`;
+    const rawSegments = path.split('/').filter(Boolean);
+    const firstRaw = rawSegments[0];
+    const secondSegment = rawSegments[1];
+    const thirdSegment = rawSegments[2];
+    const firstSegment = firstRaw ? normalizePreviewSegment(firstRaw) : '';
+    const layoutType = storeConfig.layout;
+    const isElectronicsLayout = layoutType === 'electronics';
+    const isElectronicsGridLayout = layoutType === 'electronics-grid';
+    const isAnyElectronics = isElectronicsLayout || isElectronicsGridLayout;
+    const isMotivational = layoutType === 'motivational-speaker';
+    const layoutPages = useMemo(() => {
+        return LAYOUT_PAGE_MAP[layoutType] || LAYOUT_PAGE_MAP.food;
+    }, [layoutType]);
+    const renderPage = (Component, props = {}, { withLayout = true } = {}) => (_jsx(Suspense, { fallback: null, children: withLayout ? (_jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(Component, { ...props, storeConfig: storeConfig }) })) : (_jsx(Component, { ...props, storeConfig: storeConfig })) }));
+    const ElectronicsWrapper = PAGES.ElectronicsPageWrapper;
+    const MotivationalWrapper = PAGES.MotivationalPageWrapper;
+    const wrapElectronicsOuter = (InnerComponent, childProps = {}) => (_jsx(Suspense, { fallback: null, children: _jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(ElectronicsWrapper, { storeConfig: storeConfig, children: _jsx(InnerComponent, { storeConfig: storeConfig, ...childProps }) }) }) }));
+    const wrapMotivational = (InnerComponent, childProps = {}) => (_jsx(Suspense, { fallback: null, children: _jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(MotivationalWrapper, { storeConfig: storeConfig, children: _jsx(InnerComponent, { storeConfig: storeConfig, ...childProps }) }) }) }));
+    if (!firstSegment || path === '/') {
+        const skipWrapper = layoutType === 'booking-agenda' && isBookingAgendaStoreRoot(route, storeConfig);
+        return renderPage(layoutPages.HomePage, {}, { withLayout: !skipWrapper });
+    }
+    if (firstSegment === 'account' && secondSegment === 'certificates' && thirdSegment && isMotivational) {
+        return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50", children: _jsxs("div", { className: "text-center p-8 bg-white rounded-2xl shadow-sm border border-gray-100 max-w-sm mx-auto", children: [_jsx("div", { className: "w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold", children: "C" }), _jsx("p", { className: "text-lg font-semibold text-gray-900", children: "Certificate Viewer" }), _jsxs("p", { className: "text-sm text-gray-500 mt-1 mb-6", children: ["Certificate ID: ", thirdSegment] }), _jsx("button", { type: "button", onClick: () => onNavigate?.('/account'), className: "text-sm font-medium text-blue-600 hover:text-blue-700 underline", children: "Back to Account" })] }) }));
+    }
+    if (firstSegment === 'products' && !secondSegment) {
+        if (isElectronicsGridLayout) {
+            return renderPage(PAGES.ElectronicsGridProductsPage);
+        }
+        if (isElectronicsLayout) {
+            return renderPage(PAGES.ElectronicsProductsListing);
+        }
+        return renderPage(layoutPages.ProductsPage);
+    }
+    if (firstSegment === 'products' && secondSegment) {
+        return renderPage(layoutPages.ProductDetailPage, { productSlug: secondSegment });
+    }
+    if (firstSegment === 'categories' && !secondSegment) {
+        if (isElectronicsGridLayout) {
+            return renderPage(PAGES.ElectronicsGridCategoriesPage);
+        }
+        if (isElectronicsLayout) {
+            return renderPage(PAGES.ElectronicsCategoriesPage);
+        }
+        return renderPage(layoutPages.CategoriesPage);
+    }
+    if (firstSegment === 'categories' && secondSegment) {
+        const CategoryPage = layoutPages.CategoryPage;
+        if (isAnyElectronics) {
+            return wrapElectronicsOuter(CategoryPage, { categorySlug: secondSegment });
+        }
+        return renderPage(CategoryPage, { categorySlug: secondSegment });
+    }
+    if (firstSegment === 'menu') {
+        return renderPage(layoutPages.MenuPage, { categorySlug: secondSegment });
+    }
+    if (firstSegment === 'team') {
+        if (pageFeatures.teamPage === true) {
+            return renderPage(PAGES.TeamPage);
+        }
+        return renderPage(PAGES.FeatureDisabledPage, {
+            featureName: 'Team Page',
+            featureDescription: 'The team page is not enabled for this store. Enable it in store settings to show this page.',
+        });
+    }
+    if (firstSegment === 'portfolio') {
+        if (pageFeatures.portfolioPage === true) {
+            return renderPage(PAGES.PortfolioPage);
+        }
+        return renderPage(PAGES.FeatureDisabledPage, {
+            featureName: 'Portfolio Page',
+            featureDescription: 'The portfolio page is not enabled for this store. Enable it in store settings to show this page.',
+        });
+    }
+    if (firstSegment === 'help-center') {
+        if (pageFeatures.helpCenterPage === false) {
+            return renderPage(PAGES.FeatureDisabledPage, {
+                featureName: 'Help Center',
+                featureDescription: 'The help center is disabled for this store.',
+            });
+        }
+        if (isAnyElectronics) {
+            return wrapElectronicsOuter(PAGES.HelpCenterPage);
+        }
+        return renderPage(PAGES.HelpCenterPage);
+    }
+    if (firstSegment === 'shipping-returns') {
+        if (pageFeatures.shippingReturnsPage === false) {
+            return renderPage(PAGES.FeatureDisabledPage, {
+                featureName: 'Shipping & Returns',
+                featureDescription: 'This page is disabled for this store.',
+            });
+        }
+        if (isAnyElectronics) {
+            return wrapElectronicsOuter(PAGES.ShippingReturnsPage);
+        }
+        return renderPage(PAGES.ShippingReturnsPage);
+    }
+    if (firstSegment === 'track-order') {
+        if (pageFeatures.trackOrderPage === false) {
+            return renderPage(PAGES.FeatureDisabledPage, {
+                featureName: 'Track Order',
+                featureDescription: 'Order tracking is disabled for this store.',
+            });
+        }
+        if (isAnyElectronics) {
+            return wrapElectronicsOuter(PAGES.TrackOrderPage);
+        }
+        return renderPage(PAGES.TrackOrderPage);
+    }
+    if (firstSegment === 'about') {
+        if (pageFeatures.aboutPage === false) {
+            return renderPage(PAGES.FeatureDisabledPage, {
+                featureName: 'About',
+                featureDescription: 'The about page is disabled for this store.',
+            });
+        }
+        const AboutPage = layoutPages.AboutPage;
+        const GW = PAGES.GenericPageWrapper;
+        if (!AboutPage) {
+            return (_jsx(Suspense, { fallback: null, children: _jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(GW, { storeConfig: storeConfig, children: null }) }) }));
+        }
+        if (isAnyElectronics) {
+            return wrapElectronicsOuter(AboutPage);
+        }
+        if (isMotivational) {
+            return wrapMotivational(AboutPage);
+        }
+        return (_jsx(Suspense, { fallback: null, children: _jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(GW, { storeConfig: storeConfig, children: _jsx(AboutPage, { storeConfig: storeConfig }) }) }) }));
+    }
+    if (firstSegment === 'contact') {
+        if (pageFeatures.contactPage === false) {
+            return renderPage(PAGES.FeatureDisabledPage, {
+                featureName: 'Contact',
+                featureDescription: 'The contact page is disabled for this store.',
+            });
+        }
+        const ContactPage = layoutPages.ContactPage;
+        const GW = PAGES.GenericPageWrapper;
+        if (!ContactPage) {
+            return (_jsx(Suspense, { fallback: null, children: _jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(GW, { storeConfig: storeConfig, children: null }) }) }));
+        }
+        if (isAnyElectronics) {
+            return wrapElectronicsOuter(ContactPage);
+        }
+        if (isMotivational) {
+            return wrapMotivational(ContactPage);
+        }
+        return (_jsx(Suspense, { fallback: null, children: _jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(GW, { storeConfig: storeConfig, children: _jsx(ContactPage, { storeConfig: storeConfig }) }) }) }));
+    }
+    const COMMON_PAGE_MAP = {
+        cart: PAGES.CartPage,
+        wishlist: PAGES.WishlistPage,
+        checkout: PAGES.CheckoutPage,
+        account: PAGES.AccountPage,
+        team: PAGES.TeamPage,
+        portfolio: PAGES.PortfolioPage,
+        'help-center': PAGES.HelpCenterPage,
+        'shipping-returns': PAGES.ShippingReturnsPage,
+        'track-order': PAGES.TrackOrderPage,
+        terms: PAGES.TermsPage,
+        privacy: PAGES.PrivacyPolicyPage,
+        'cookie-policy': PAGES.CookiePolicyPage,
+        'size-guide': PAGES.SizeGuidePage,
+        'style-guide': PAGES.StyleGuidePage,
+    };
+    if (firstSegment in COMMON_PAGE_MAP) {
+        const Component = COMMON_PAGE_MAP[firstSegment];
+        if (['cart', 'wishlist', 'checkout', 'account', 'terms', 'privacy', 'cookie-policy', 'size-guide', 'style-guide'].includes(firstSegment)) {
+            if (isAnyElectronics) {
+                return wrapElectronicsOuter(Component);
+            }
+        }
+        return renderPage(Component);
+    }
+    if (firstSegment === 'book' && layoutPages.BookPage) {
+        return renderPage(layoutPages.BookPage, { serviceSlug: secondSegment });
+    }
+    if (firstSegment === 'services' && storeConfig.pageFeatures?.servicesPage !== false) {
+        if (isMotivational && secondSegment) {
+            return wrapMotivational(PAGES.ServiceDetailPage, { serviceSlug: secondSegment });
+        }
+        if (layoutPages.ServicesPage) {
+            return renderPage(layoutPages.ServicesPage);
+        }
+    }
+    if (firstSegment === 'mentorship' && isMotivational && layoutPages.ServicesPage) {
+        return renderPage(layoutPages.ServicesPage, {
+            initialCategory: 'mentorship',
+            titleOverride: 'Premium Mentorship',
+        });
+    }
+    if (firstSegment === 'subscription' && isMotivational) {
+        return wrapMotivational(PAGES.SubscriptionPage);
+    }
+    if (firstSegment === 'order' && secondSegment === 'success') {
+        const primaryColor = storeConfig.branding.primaryColor;
+        const GW = PAGES.GenericPageWrapper;
+        return (_jsx(Suspense, { fallback: null, children: _jsx(BaseStoreLayout, { storeConfig: storeConfig, children: _jsx(GW, { storeConfig: storeConfig, children: _jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", children: _jsx("div", { className: "max-w-md w-full space-y-8 bg-white p-8 rounded-2xl shadow-sm border border-gray-100", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mx-auto h-16 w-16 mb-4 rounded-full flex items-center justify-center", style: { backgroundColor: `${primaryColor}20`, color: primaryColor }, children: _jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Order Confirmed!" }), _jsx("p", { className: "text-gray-600 mb-8", children: "Thank you for your purchase. Your order has been received." }), _jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: "button", onClick: () => onNavigate?.('/'), className: "w-full px-4 py-2.5 rounded-xl text-white font-semibold transition-opacity hover:opacity-90", style: { backgroundColor: primaryColor }, children: "Continue Shopping" }), _jsx("button", { type: "button", onClick: () => onNavigate?.('/account'), className: "w-full px-4 py-2.5 rounded-xl border border-gray-200 text-gray-700 font-semibold hover:bg-gray-50 transition-colors", children: "View Order Details" })] })] }) }) }) }) }) }));
+    }
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50", children: _jsxs("div", { className: "text-center p-12 bg-white rounded-3xl shadow-sm border border-gray-100 max-w-sm mx-auto", children: [_jsx("div", { className: "w-20 h-20 bg-orange-50 text-orange-500 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl font-black", children: "!" }), _jsx("h3", { className: "text-xl font-bold text-gray-900 mb-2", children: "Page not found" }), _jsx("p", { className: "text-sm text-gray-500 mb-8 leading-relaxed", children: "The page you're looking for doesn't exist in this preview experience." }), _jsx("button", { type: "button", onClick: () => onNavigate?.('/'), className: "px-8 py-3 bg-gray-900 text-white rounded-2xl font-bold text-sm hover:bg-black transition-colors", children: "Return Home" })] }) }));
+}

package/dist/preview/ShadowDOMWrapper.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+interface ShadowDOMWrapperProps {
+    children: ReactNode;
+    className?: string;
+    onReady?: () => void;
+    onLinkClick?: (href: string) => void;
+    storeSlug?: string;
+}
+/**
+ * ShadowDOMWrapper Component
+ *
+ * Wraps children in a Shadow DOM for complete style and DOM isolation using React Portals.
+ * This ensures that React Contexts (like Router, Theme, Auth) are preserved from the parent tree,
+ * while styles remain encapsulated.
+ */
+export declare function ShadowDOMWrapper({ children, className, onReady, onLinkClick, storeSlug }: ShadowDOMWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ShadowDOMWrapper.d.ts.map

package/dist/preview/ShadowDOMWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowDOMWrapper.d.ts","sourceRoot":"","sources":["../../src/preview/ShadowDOMWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CA2F/G"}

package/dist/preview/ShadowDOMWrapper.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+/**
+ * ShadowDOMWrapper Component
+ *
+ * Wraps children in a Shadow DOM for complete style and DOM isolation using React Portals.
+ * This ensures that React Contexts (like Router, Theme, Auth) are preserved from the parent tree,
+ * while styles remain encapsulated.
+ */
+export function ShadowDOMWrapper({ children, className, onReady, onLinkClick, storeSlug }) {
+    const hostRef = useRef(null);
+    const [shadowRoot, setShadowRoot] = useState(null);
+    // Initialize Shadow Root on mount
+    useEffect(() => {
+        if (hostRef.current && !shadowRoot) {
+            // Create shadow root if it doesn't exist
+            const root = hostRef.current.attachShadow({ mode: 'open' });
+            setShadowRoot(root);
+            onReady?.();
+        }
+    }, [onReady, shadowRoot]);
+    // Handle link clicks via React Event Capture
+    // Capturing allows us to intercept the click BEFORE internal Link components handle it
+    const handleLinkClickCapture = (e) => {
+        if (!onLinkClick)
+            return;
+        // Find closest anchor tag
+        const target = e.target;
+        const link = target.closest('a');
+        if (!link || !link.href)
+            return;
+        try {
+            const url = new URL(link.href, window.location.origin);
+            const pathname = url.pathname;
+            // Only intercept internal links
+            if (url.origin !== window.location.origin) {
+                return;
+            }
+            // Extract route logic
+            let route = pathname;
+            // Check if pathname starts with store slug (e.g., /modern-eats/contact)
+            if (storeSlug && pathname.startsWith(`/${storeSlug}`)) {
+                route = pathname.slice(storeSlug.length + 1);
+                if (!route || route === '') {
+                    route = '/';
+                }
+            }
+            else if (pathname === '/' || pathname === '') {
+                route = '/';
+            }
+            // Normalize route
+            if (route && !route.startsWith('/')) {
+                route = `/${route}`;
+            }
+            if (!route)
+                route = '/';
+            // Intercept navigation
+            e.preventDefault();
+            e.stopPropagation();
+            onLinkClick(route);
+        }
+        catch (err) {
+            console.warn('[ShadowDOMWrapper] Failed to parse link URL:', err);
+        }
+    };
+    return (_jsx("div", { ref: hostRef, className: className, style: { width: '100%', minHeight: '100%' }, children: shadowRoot && createPortal(_jsxs(_Fragment, { children: [_jsx("style", { children: `
+            * {
+              box-sizing: border-box;
+              margin: 0;
+              padding: 0;
+            }
+            #shadow-preview-container {
+              width: 100%;
+              min-height: 100%;
+              font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            }
+          ` }), _jsx("div", { id: "shadow-preview-container", onClickCapture: handleLinkClickCapture, children: children })] }), shadowRoot) }));
+}

package/dist/preview/canvas/PreviewBlockToolbar.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type BlockToolbarMode = 'text' | 'image' | 'section' | 'group';
+export interface PreviewBlockToolbarProps {
+    visible: boolean;
+    mode: BlockToolbarMode;
+    anchorRect: DOMRect | null;
+    /** Rich field selected (HTML commit path) */
+    richField?: boolean;
+    /** Active contenteditable session */
+    richEditingActive?: boolean;
+    onBold?: () => void;
+    onItalic?: () => void;
+    onUnderline?: () => void;
+    /** Called with the URL the user confirmed, and the Range saved before the input stole focus */
+    onLinkApply?: (url: string, savedRange: Range | null) => void;
+    onUnlink?: () => void;
+    onBullets?: () => void;
+    onOrderedList?: () => void;
+    onClearFormatting?: () => void;
+    onReplaceImage?: () => void;
+}
+export declare function PreviewBlockToolbar({ visible, mode, anchorRect, richField, richEditingActive, onBold, onItalic, onUnderline, onLinkApply, onUnlink, onBullets, onOrderedList, onClearFormatting, onReplaceImage, }: PreviewBlockToolbarProps): React.ReactPortal;
+//# sourceMappingURL=PreviewBlockToolbar.d.ts.map

package/dist/preview/canvas/PreviewBlockToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewBlockToolbar.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/PreviewBlockToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAkB3D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;IACvB,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAwCD,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,cAAc,GACf,EAAE,wBAAwB,qBAqN1B"}

package/dist/preview/canvas/PreviewBlockToolbar.js

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AlignLeft, Bold, Image as ImageIcon, Layers, Link2, List, ListOrdered, RemoveFormatting, Type, Underline, Upload, X, } from 'lucide-react';
+/* ─── tiny helpers ─────────────────────────────────────────────────────────── */
+function Sep() {
+    return _jsx("span", { className: "inline-block h-5 w-px shrink-0 bg-[#dcdcde]", "aria-hidden": true });
+}
+function Btn({ title, onClick, disabled = false, children, }) {
+    return (_jsx("button", { type: "button", className: [
+            'flex h-8 w-8 shrink-0 items-center justify-center rounded transition-colors',
+            disabled
+                ? 'cursor-not-allowed text-[#c3c4c7]'
+                : 'text-[#1d2327] hover:bg-[#f0f0f1] hover:text-[#1b0029]',
+        ].join(' '), disabled: disabled, title: title, "aria-label": title, onClick: disabled ? undefined : onClick, children: children }));
+}
+/* ─── component ────────────────────────────────────────────────────────────── */
+export function PreviewBlockToolbar({ visible, mode, anchorRect, richField, richEditingActive, onBold, onItalic, onUnderline, onLinkApply, onUnlink, onBullets, onOrderedList, onClearFormatting, onReplaceImage, }) {
+    const [showLinkInput, setShowLinkInput] = useState(false);
+    const [linkUrl, setLinkUrl] = useState('');
+    const savedRangeRef = useRef(null);
+    const linkInputRef = useRef(null);
+    // Focus the link input once it appears
+    useEffect(() => {
+        if (showLinkInput)
+            linkInputRef.current?.focus();
+    }, [showLinkInput]);
+    // Close link input on Escape
+    useEffect(() => {
+        if (!showLinkInput)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                setShowLinkInput(false);
+                setLinkUrl('');
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [showLinkInput]);
+    if (typeof document === 'undefined' || !visible || !anchorRect)
+        return null;
+    /* ── positioning ──────────────────────────────────────────────────────────
+       Anchored to the element's top-left edge (matching the screenshot).
+       Falls back to below the element when there's no room above.           */
+    const ROW_H = 36; // px per toolbar row
+    const HINT_H = showLinkInput ? 0 : mode === 'text' && richField && !richEditingActive ? 32 : 0;
+    const ROWS = mode === 'text' && richField ? 2 : 1;
+    const TOOLBAR_BOX_H = ROWS * ROW_H;
+    const TOTAL_H = TOOLBAR_BOX_H + (HINT_H > 0 ? HINT_H + 4 : 0);
+    const GAP = 6; // px between toolbar and element
+    const spaceAbove = anchorRect.top - GAP;
+    const spaceBelow = window.innerHeight - anchorRect.bottom - GAP;
+    const placedAbove = spaceAbove >= TOTAL_H || spaceAbove >= spaceBelow;
+    const top = placedAbove
+        ? anchorRect.top - TOTAL_H - GAP
+        : anchorRect.bottom + GAP;
+    // Approximate toolbar width to keep it inside the viewport on the right
+    const approxW = mode === 'text' && richField ? 390 : mode === 'image' ? 248 : 192;
+    const left = Math.max(8, Math.min(window.innerWidth - approxW - 8, anchorRect.left));
+    /* ── link button handler ──────────────────────────────────────────────── */
+    const handleLinkBtnClick = () => {
+        if (!richEditingActive)
+            return;
+        // Save the current selection BEFORE the input steals focus
+        const sel = window.getSelection?.();
+        savedRangeRef.current = sel?.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
+        setLinkUrl('https://');
+        setShowLinkInput(true);
+    };
+    const handleLinkConfirm = () => {
+        const url = linkUrl.trim();
+        setShowLinkInput(false);
+        setLinkUrl('');
+        onLinkApply?.(url, savedRangeRef.current);
+        savedRangeRef.current = null;
+    };
+    const handleLinkCancel = () => {
+        setShowLinkInput(false);
+        setLinkUrl('');
+        savedRangeRef.current = null;
+    };
+    /* ── render ───────────────────────────────────────────────────────────── */
+    const blockIcon = mode === 'image' ? _jsx(ImageIcon, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true }) :
+        mode === 'section' ? _jsx(Layers, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true }) :
+            mode === 'group' ? _jsx(Layers, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true }) :
+                _jsx(Type, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true });
+    const el = (_jsxs("div", { className: "pointer-events-auto z-[99999]", style: {
+            position: 'fixed',
+            top,
+            left,
+            fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+            fontSize: 13,
+        }, onMouseDown: (e) => {
+            // Prevent focus loss from the contenteditable — but allow the link input to receive focus
+            if (e.target.closest('[data-link-input]'))
+                return;
+            e.preventDefault();
+        }, role: "toolbar", "aria-label": "Block toolbar", children: [_jsxs("div", { className: "flex flex-col overflow-hidden rounded-[3px] border border-[#dcdcde] bg-white shadow-[0_3px_12px_rgba(0,0,0,0.10)]", children: [_jsxs("div", { className: "flex h-9 items-center gap-0.5 px-1", children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center text-[#440066]", title: mode === 'image' ? 'Image block' : mode === 'section' ? 'Section' : mode === 'group' ? 'Group block' : 'Text block', "aria-label": mode === 'image' ? 'Image block' : mode === 'section' ? 'Section' : mode === 'group' ? 'Group block' : 'Text block', children: blockIcon }), mode === 'image' && onReplaceImage && (_jsxs(_Fragment, { children: [_jsx(Sep, {}), _jsxs("button", { type: "button", onClick: onReplaceImage, className: "flex h-8 items-center gap-1.5 rounded px-2.5 text-[12px] font-semibold text-[#440066] transition-colors hover:bg-[#f0f0f1]", title: "Replace image", "aria-label": "Replace image", children: [_jsx(Upload, { className: "h-3.5 w-3.5", strokeWidth: 2.5, "aria-hidden": true }), "Replace image"] })] }))] }), mode === 'text' && richField ? (_jsx("div", { className: "flex h-9 items-center gap-0.5 border-t border-[#dcdcde] px-1", children: showLinkInput ? (
+                        /* Inline URL input replaces the formatting row while active */
+                        _jsxs(_Fragment, { children: [_jsx(Link2, { className: "ml-1 h-3.5 w-3.5 shrink-0 text-[#787c82]", strokeWidth: 2, "aria-hidden": true }), _jsx("input", { ref: linkInputRef, "data-link-input": true, type: "url", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            handleLinkConfirm();
+                                        }
+                                        if (e.key === 'Escape') {
+                                            e.preventDefault();
+                                            handleLinkCancel();
+                                        }
+                                    }, onMouseDown: (e) => e.stopPropagation(), placeholder: "https://example.com", className: "min-w-0 flex-1 rounded bg-[#f6f7f7] px-2 py-1 text-[12px] text-[#1b0029] outline-none ring-1 ring-inset ring-[#440066]/40 focus:ring-[#440066]", "aria-label": "Link URL" }), _jsx("button", { type: "button", onMouseDown: (e) => e.stopPropagation(), onClick: handleLinkConfirm, className: "ml-0.5 flex h-7 items-center rounded px-2 text-[11px] font-semibold text-[#440066] transition-colors hover:bg-[#ebe4f5]", title: "Apply link", children: "Apply" }), _jsx("button", { type: "button", onMouseDown: (e) => e.stopPropagation(), onClick: handleLinkCancel, className: "flex h-8 w-8 items-center justify-center rounded text-[#787c82] transition-colors hover:bg-[#f0f0f1]", title: "Cancel", "aria-label": "Cancel link", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 2.5 }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Btn, { title: "Bold", onClick: onBold, disabled: !richEditingActive, children: _jsx(Bold, { className: "h-[15px] w-[15px]", strokeWidth: 2.5 }) }), _jsx(Btn, { title: "Italic", onClick: onItalic, disabled: !richEditingActive, children: _jsx(AlignLeft, { className: "h-4 w-4", strokeWidth: 2 }) }), _jsx(Btn, { title: "Underline", onClick: onUnderline, disabled: !richEditingActive, children: _jsx(Underline, { className: "h-4 w-4", strokeWidth: 2 }) }), _jsx(Btn, { title: "Add link", onClick: handleLinkBtnClick, disabled: !richEditingActive, children: _jsx(Link2, { className: "h-4 w-4", strokeWidth: 2 }) }), _jsx(Sep, {}), _jsx(Btn, { title: "Bullet list", onClick: onBullets, disabled: !richEditingActive, children: _jsx(List, { className: "h-4 w-4", strokeWidth: 2 }) }), _jsx(Btn, { title: "Numbered list", onClick: onOrderedList, disabled: !richEditingActive, children: _jsx(ListOrdered, { className: "h-4 w-4", strokeWidth: 2 }) }), _jsx(Btn, { title: "Clear formatting", onClick: onClearFormatting, disabled: !richEditingActive, children: _jsx(RemoveFormatting, { className: "h-4 w-4", strokeWidth: 2 }) })] })) })) : null] }), mode === 'text' && richField && !richEditingActive && !showLinkInput && (_jsx("p", { className: "mt-1.5 max-w-[320px] rounded-[2px] border border-[#e8e9ec] bg-white px-2.5 py-1.5 text-[11px] leading-snug text-[#787c82] shadow-sm", children: "Click again to edit text, then use formatting" }))] }));
+    return createPortal(el, document.body);
+}

package/dist/preview/canvas/PreviewCanvasEnhancer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PayazaPreviewContext } from './preview-isolation';
+import { type PreviewFlushHandle } from './preview-flush-handle';
+export interface PreviewCanvasEnhancerProps {
+    enabled: boolean;
+    interactionMode: 'edit' | 'preview';
+    children: React.ReactNode;
+    previewContext?: PayazaPreviewContext | null;
+    /** When set (inline mobile preview), dispatch events directly instead of postMessage to parent. */
+    onPreviewEvent?: (payload: object) => void;
+    /** Canvas scroll container — when set, toolbar tracks this element's scroll instead of window. */
+    scrollRootRef?: React.RefObject<HTMLElement | null>;
+    /** Optional ref for synchronous flush before save/publish (inline preview only). */
+    previewFlushRef?: React.MutableRefObject<PreviewFlushHandle | null>;
+}
+export declare function PreviewCanvasEnhancer({ enabled, interactionMode, children, previewContext, onPreviewEvent, scrollRootRef, previewFlushRef, }: PreviewCanvasEnhancerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PreviewCanvasEnhancer.d.ts.map

package/dist/preview/canvas/PreviewCanvasEnhancer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCanvasEnhancer.d.ts","sourceRoot":"","sources":["../../../src/preview/canvas/PreviewCanvasEnhancer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAUhE,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C,mGAAmG;IACnG,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kGAAkG;IAClG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACpD,oFAAoF;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;CACrE;AAeD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,eAAe,EACf,QAAQ,EACR,cAAqB,EACrB,cAAc,EACd,aAAa,EACb,eAAe,GAChB,EAAE,0BAA0B,2CAgyB5B"}