storefront-layouts-staging 1.0.0-staging.0

package/dist/editor/shared/useEditorChromeMetrics.js

@@ -0,0 +1,52 @@
+import { useLayoutEffect } from 'react';
+/**
+ * Measures editor chrome heights and publishes CSS vars on the editor root
+ * so mobile overlays and chips align with real header / controls / footer sizes.
+ */
+export function useEditorChromeMetrics({ headerRef, controlsBarRef, bottomNavRef, remountKey, }) {
+    useLayoutEffect(() => {
+        const header = headerRef.current;
+        if (!header)
+            return;
+        const resolveRoot = () => {
+            const host = header.closest('#payaza-editor-root');
+            if (host instanceof HTMLElement)
+                return host;
+            const editorRoot = header.closest('[data-payaza-editor-root]');
+            if (editorRoot instanceof HTMLElement)
+                return editorRoot;
+            return document.documentElement;
+        };
+        const observed = new Set();
+        const observeEl = (el) => {
+            if (el && !observed.has(el)) {
+                observer.observe(el);
+                observed.add(el);
+            }
+        };
+        const update = () => {
+            const root = resolveRoot();
+            const headerHeight = header.getBoundingClientRect().height;
+            const controlsHeight = controlsBarRef?.current?.getBoundingClientRect().height ?? 0;
+            const bottomHeight = bottomNavRef?.current?.getBoundingClientRect().height ?? 0;
+            root.style.setProperty('--payaza-editor-header-height', `${Math.ceil(headerHeight)}px`);
+            root.style.setProperty('--payaza-editor-top-chrome-height', `${Math.ceil(headerHeight + controlsHeight)}px`);
+            root.style.setProperty('--payaza-editor-bottom-chrome-height', `${Math.ceil(bottomHeight)}px`);
+            observeEl(controlsBarRef?.current ?? null);
+            observeEl(bottomNavRef?.current ?? null);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observeEl(header);
+        window.addEventListener('orientationchange', update);
+        window.addEventListener('resize', update);
+        const raf = requestAnimationFrame(update);
+        return () => {
+            cancelAnimationFrame(raf);
+            observer.disconnect();
+            window.removeEventListener('orientationchange', update);
+            window.removeEventListener('resize', update);
+        };
+    }, [headerRef, controlsBarRef, bottomNavRef, remountKey]);
+}
+export const MOBILE_EDITOR_PANEL_TOP = 'var(--payaza-editor-top-chrome-height, var(--payaza-editor-header-height, 52px))';

package/dist/editor/types.d.ts

@@ -0,0 +1,162 @@
+import { StoreConfig } from '../lib/store-types';
+import type { EditorDocumentEnvelope } from './document/types';
+/**
+ * Full inventory of layouts
+ * Note: requirements field kept for backward compatibility but is now empty
+ * All functionality uses alignment-schemas instead
+ */
+export interface LayoutInventory {
+    /**
+     * Map of layout ID to its static configuration/JSON
+     */
+    data: Record<string, StoreConfig>;
+    /**
+     * Map of layout ID to its requirements/schema definition
+     * @deprecated Use alignment-schemas instead
+     */
+    requirements: Record<string, any>;
+}
+/**
+ * Common editor props for PayazaFormEditor
+ */
+export interface BaseEditorProps {
+    /**
+     * The layout ID being edited (e.g., 'food', 'clothing')
+     */
+    layoutId: string;
+    /**
+     * Initial layout data (StoreConfig)
+     */
+    initialData: StoreConfig;
+    /**
+     * Full inventory for context awareness
+     */
+    inventory?: LayoutInventory;
+    /**
+     * Callback triggered when any data changes
+     */
+    onChange?: (data: StoreConfig) => void;
+    /**
+     * Emits versioned editor document (block envelope + legacy snapshot) for persistence APIs.
+     * Debounced inside PayazaFormEditor.
+     */
+    onEditorDocumentChange?: (doc: EditorDocumentEnvelope) => void;
+    /**
+     * Callback triggered when save is explicitly requested
+     */
+    onSave?: (data: StoreConfig, editorDocument?: EditorDocumentEnvelope) => void | Promise<void>;
+    /**
+     * Callback triggered when publish is explicitly requested
+     */
+    onPublish?: (data: StoreConfig, editorDocument?: EditorDocumentEnvelope) => void | Promise<void>;
+    /**
+     * Additional CSS classes for the editor container
+     */
+    className?: string;
+}
+/**
+ * Props for embedded editor variants
+ */
+export interface EmbeddedEditorProps extends BaseEditorProps {
+    /**
+     * Height of the editor container
+     * @default '600px'
+     */
+    height?: string | number;
+}
+/**
+ * Props for full-page editor variants
+ */
+export interface FullPageEditorProps extends BaseEditorProps {
+    /**
+     * Title displayed in the editor header
+     */
+    title?: string;
+    /**
+     * Callback triggered when the back button is clicked
+     */
+    onBack?: () => void;
+    /**
+     * Callback triggered to go back to store settings step
+     */
+    onBackToSettings?: () => void;
+    /**
+     * Callback triggered to open assets library
+     */
+    onOpenAssets?: () => void;
+    /**
+     * Callback triggered to go back to theme selector set
+     */
+    onBackToTheme?: () => void;
+    /**
+     * Optional store name passed from host app
+     */
+    storeName?: string;
+    /**
+     * Optional store description passed from host app
+     */
+    storeDescription?: string;
+    /**
+     * Optional array of existing asset URLs passed from host app
+     */
+    assets?: string[];
+    /**
+     * Optional custom text for the publish button (e.g., "Update" for published stores)
+     */
+    publishButtonText?: string;
+    /**
+     * Whether the loaded initialData represents the currently published content.
+     * When false (e.g. a draft was loaded), the Publish button is enabled immediately
+     * without requiring a further edit, because the draft itself is an unpublished change.
+     * Defaults to true for backward compatibility.
+     */
+    initialDataIsPublished?: boolean;
+    /**
+     * Fired once when the editor finishes its initial schema load and is ready to paint.
+     * The host uses this to remove the "Preparing your layout…" overlay without relying
+     * on timer fallbacks.
+     */
+    onEditorHydrated?: () => void;
+    /**
+     * Pre-computed base requirement (OverlayLayoutJSON) supplied by the host to skip the
+     * redundant synchronous schema-bridge call inside the editor on mount.
+     */
+    preloadedBaseRequirement?: unknown;
+    /**
+     * Live catalog injected by the host after async product/category fetch.
+     * Merged into preview data so product sections render real inventory.
+     */
+    catalogOverlay?: {
+        products?: StoreConfig['products'];
+        categories?: StoreConfig['categories'];
+        services?: StoreConfig['services'];
+    };
+    /**
+     * Short status line shown in the mobile header area (e.g. "Checking store status…").
+     */
+    headerStatusNote?: string;
+    /**
+     * Blocking/informational banner below the header toolbar on mobile.
+     */
+    mobileStatusBanner?: {
+        tone: 'info' | 'warning';
+        message: string;
+    };
+    /**
+     * Host-driven draft save lifecycle for header status hints.
+     */
+    draftSaveStatus?: 'idle' | 'dirty' | 'saving' | 'saved';
+}
+/**
+ * Interface representing a page within a layout
+ */
+export interface LayoutPage {
+    id: string;
+    name: string;
+    content: any[];
+}
+/**
+ * Mapping of page IDs to their content
+ */
+export type LayoutPagesMap = Record<string, any[]>;
+//# sourceMappingURL=types.d.ts.map

package/dist/editor/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/editor/types.ts"],"names":[],"mappings":"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"}

package/dist/editor/types.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/use-analytics.d.ts

@@ -0,0 +1,15 @@
+import { EventType } from '../lib/services/analytics.service';
+interface TrackEventOptions {
+    eventType: EventType;
+    metadata?: Record<string, any>;
+    immediate?: boolean;
+}
+/**
+ * React hook for analytics tracking
+ * Automatically tracks page views and provides trackEvent function
+ */
+export declare function useAnalytics(): {
+    trackEvent: (options: TrackEventOptions) => Promise<void>;
+};
+export {};
+//# sourceMappingURL=use-analytics.d.ts.map

package/dist/hooks/use-analytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-analytics.d.ts","sourceRoot":"","sources":["../../src/hooks/use-analytics.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAI/E,UAAU,iBAAiB;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,YAAY;0BAOR,iBAAiB;EAyDpC"}

package/dist/hooks/use-analytics.js

@@ -0,0 +1,62 @@
+'use client';
+import { useEffect, useCallback, useRef } from 'react';
+import { usePathname } from 'next/navigation';
+import { analyticsService } from '../lib/services/analytics.service.js';
+import { useStore } from '../lib/store-context.js';
+import { useAuth } from '../lib/auth-context.js';
+/**
+ * React hook for analytics tracking
+ * Automatically tracks page views and provides trackEvent function
+ */
+export function useAnalytics() {
+    const pathname = usePathname();
+    const { store } = useStore();
+    const { user } = useAuth();
+    const lastTrackedPath = useRef(null);
+    const trackEvent = useCallback(async (options) => {
+        if (!store?.id) {
+            console.warn('Analytics: Cannot track event, store not loaded');
+            return;
+        }
+        try {
+            await analyticsService.trackEvent({
+                storeId: store.id,
+                eventType: options.eventType,
+                userId: user?.id || null,
+                metadata: options.metadata,
+                immediate: options.immediate,
+            });
+        }
+        catch (error) {
+            console.warn('Analytics tracking error:', error);
+        }
+    }, [store?.id, user?.id]);
+    useEffect(() => {
+        if (!store?.id) {
+            return;
+        }
+        const search = typeof window !== 'undefined' ? window.location.search.replace(/^\?/, '') : '';
+        const currentPath = pathname + (search ? `?${search}` : '');
+        if (currentPath === lastTrackedPath.current) {
+            return;
+        }
+        if (analyticsService.shouldSkipAutoPageView(pathname)) {
+            lastTrackedPath.current = currentPath;
+            return;
+        }
+        lastTrackedPath.current = currentPath;
+        const timeoutId = setTimeout(() => {
+            trackEvent({
+                eventType: 'page_view',
+                metadata: {
+                    path: pathname,
+                    query: search || undefined,
+                },
+            });
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [pathname, store?.id, trackEvent]);
+    return {
+        trackEvent,
+    };
+}

package/dist/hooks/use-api.d.ts

@@ -0,0 +1,17 @@
+export interface UseApiOptions<T> {
+    immediate?: boolean;
+    onSuccess?: (data: T) => void;
+    onError?: (error: Error) => void;
+}
+export interface UseApiResult<T> {
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+    execute: (...args: any[]) => Promise<T | undefined>;
+    reset: () => void;
+}
+/**
+ * Generic API hook for async operations
+ */
+export declare function useApi<T>(apiFunction: (...args: any[]) => Promise<T>, options?: UseApiOptions<T>): UseApiResult<T>;
+//# sourceMappingURL=use-api.d.ts.map

package/dist/hooks/use-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-api.d.ts","sourceRoot":"","sources":["../../src/hooks/use-api.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IACpD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,CAAC,EACtB,WAAW,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAC3C,OAAO,GAAE,aAAa,CAAC,CAAC,CAAM,GAC7B,YAAY,CAAC,CAAC,CAAC,CAoDjB"}

package/dist/hooks/use-api.js

@@ -0,0 +1,53 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useLoading } from '../lib/loading-context.js';
+/**
+ * Generic API hook for async operations
+ */
+export function useApi(apiFunction, options = {}) {
+    const { immediate = false, onSuccess, onError } = options;
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(immediate);
+    const [error, setError] = useState(null);
+    // Get loading context if available
+    let loadingContext = null;
+    try {
+        loadingContext = useLoading();
+    }
+    catch {
+        // LoadingProvider not available, continue without it
+    }
+    const startBackendLoading = loadingContext?.startBackendLoading;
+    const stopBackendLoading = loadingContext?.stopBackendLoading;
+    const execute = useCallback(async (...args) => {
+        setLoading(true);
+        setError(null);
+        startBackendLoading?.();
+        try {
+            const result = await apiFunction(...args);
+            setData(result);
+            onSuccess?.(result);
+            return result;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            onError?.(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+            stopBackendLoading?.();
+        }
+    }, [apiFunction, onSuccess, onError, startBackendLoading, stopBackendLoading]);
+    const reset = useCallback(() => {
+        setData(null);
+        setError(null);
+        setLoading(false);
+    }, []);
+    useEffect(() => {
+        if (immediate) {
+            execute();
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return { data, loading, error, execute, reset };
+}

package/dist/hooks/use-cart-api.d.ts

@@ -0,0 +1,28 @@
+import { StoreConfig } from '../lib/store-types';
+export interface Cart {
+    items: CartItem[];
+    total: number;
+}
+export interface CartItem {
+    id: string;
+    productId: string;
+    quantity: number;
+    price: number;
+    product?: any;
+}
+export interface UseCartApiResult {
+    cart: Cart | null;
+    loading: boolean;
+    error: string | null;
+    syncCart: () => Promise<void>;
+    addItem: (productId: string, quantity: number, options?: Record<string, any>) => Promise<void>;
+    updateItem: (itemId: string, quantity: number) => Promise<void>;
+    removeItem: (itemId: string) => Promise<void>;
+    clearCart: () => Promise<void>;
+}
+/**
+ * Hook to manage cart - uses StoreContext only (localStorage-based)
+ * Note: cartService removed - all cart operations use StoreContext
+ */
+export declare function useCartApi(storeConfig: StoreConfig | null): UseCartApiResult;
+//# sourceMappingURL=use-cart-api.d.ts.map

package/dist/hooks/use-cart-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cart-api.d.ts","sourceRoot":"","sources":["../../src/hooks/use-cart-api.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/F,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,gBAAgB,CAqH5E"}

package/dist/hooks/use-cart-api.js

@@ -0,0 +1,116 @@
+import { useState, useCallback } from 'react';
+import { useStore } from '../lib/store-context.js';
+/**
+ * Hook to manage cart - uses StoreContext only (localStorage-based)
+ * Note: cartService removed - all cart operations use StoreContext
+ */
+export function useCartApi(storeConfig) {
+    const { cart: localCart, addToCart: localAddToCart, updateCartQuantity, removeFromCart: localRemoveFromCart } = useStore();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Convert localCart to Cart format
+    const apiCart = localCart.length > 0 ? {
+        items: localCart.map(item => ({
+            id: item.id,
+            productId: item.productId,
+            quantity: item.quantity,
+            price: item.price,
+            product: item.product,
+        })),
+        total: localCart.reduce((sum, item) => sum + (item.price * item.quantity), 0),
+    } : null;
+    const syncCart = useCallback(async () => {
+        // No-op: cart is managed by StoreContext (localStorage-based)
+        // This function exists for API compatibility
+    }, []);
+    const addItem = useCallback(async (productId, quantity, options) => {
+        if (!storeConfig)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            // Find product from storeConfig
+            const product = storeConfig.products?.find(p => p.id === productId);
+            if (!product) {
+                throw new Error('Product not found');
+            }
+            // Use StoreContext addToCart (localStorage-based)
+            await localAddToCart(product, quantity, options?.variantId);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to add item';
+            setError(errorMessage);
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [storeConfig, localAddToCart]);
+    const updateItem = useCallback(async (itemId, quantity) => {
+        if (!storeConfig)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            // Use StoreContext updateCartQuantity (localStorage-based)
+            await updateCartQuantity(itemId, quantity);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to update item';
+            setError(errorMessage);
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [storeConfig, updateCartQuantity]);
+    const removeItem = useCallback(async (itemId) => {
+        if (!storeConfig)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            // Use StoreContext removeFromCart (localStorage-based)
+            await localRemoveFromCart(itemId);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to remove item';
+            setError(errorMessage);
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [storeConfig, localRemoveFromCart]);
+    const clearCart = useCallback(async () => {
+        if (!storeConfig)
+            return;
+        try {
+            setLoading(true);
+            setError(null);
+            // Remove all items from cart
+            const itemsToRemove = [...localCart];
+            for (const item of itemsToRemove) {
+                await localRemoveFromCart(item.id);
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to clear cart';
+            setError(errorMessage);
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [storeConfig, localCart, localRemoveFromCart]);
+    return {
+        cart: apiCart,
+        loading,
+        error,
+        syncCart,
+        addItem,
+        updateItem,
+        removeItem,
+        clearCart,
+    };
+}

package/dist/hooks/use-catalog-loader.d.ts

@@ -0,0 +1,19 @@
+import type { StoreCategory, StoreConfig, StoreMenuItem, StoreProduct, StoreService } from '../lib/store-types';
+export type UseCatalogLoaderOptions = {
+    fetchProducts?: boolean;
+    fetchCategories?: boolean;
+    fetchServices?: boolean;
+};
+export type UseCatalogLoaderResult = {
+    products: StoreProduct[];
+    categories: StoreCategory[];
+    services: StoreService[];
+    menuItems: StoreMenuItem[];
+    isLoading: boolean;
+};
+/**
+ * Hydrates catalog arrays from API when storeConfig has empty products/categories/services.
+ * Used on non-home pages for editor preview (before Phase 2 overlay) and live storefront edge cases.
+ */
+export declare function useCatalogLoader(storeConfig: StoreConfig, options?: UseCatalogLoaderOptions): UseCatalogLoaderResult;
+//# sourceMappingURL=use-catalog-loader.d.ts.map

package/dist/hooks/use-catalog-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-catalog-loader.d.ts","sourceRoot":"","sources":["../../src/hooks/use-catalog-loader.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS/G,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,WAAW,EACxB,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAyHxB"}

package/dist/hooks/use-catalog-loader.js

@@ -0,0 +1,107 @@
+'use client';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { transformCategoryToStoreCategory, transformProductToStoreProduct, transformServiceToStoreService, } from '../lib/store-config-utils.js';
+import { syncFoodMenuItemsFromProducts } from '../lib/utils/editor-preview.js';
+import { useLoading } from '../lib/loading-context.js';
+/**
+ * Hydrates catalog arrays from API when storeConfig has empty products/categories/services.
+ * Used on non-home pages for editor preview (before Phase 2 overlay) and live storefront edge cases.
+ */
+export function useCatalogLoader(storeConfig, options = {}) {
+    const { fetchProducts = true, fetchCategories = true, fetchServices = true, } = options;
+    const [products, setProducts] = useState(() => storeConfig.products || []);
+    const [categories, setCategories] = useState(() => storeConfig.categories || []);
+    const [services, setServices] = useState(() => storeConfig.services || []);
+    const [isLoading, setIsLoading] = useState(false);
+    const fetchStartedRef = useRef(false);
+    let loadingContext = null;
+    try {
+        loadingContext = useLoading();
+    }
+    catch {
+        // LoadingProvider not available outside storefront shell
+    }
+    const startBackendLoading = loadingContext?.startBackendLoading;
+    const stopBackendLoading = loadingContext?.stopBackendLoading;
+    useEffect(() => {
+        if (storeConfig.products?.length) {
+            setProducts(storeConfig.products);
+        }
+        if (storeConfig.categories?.length) {
+            setCategories(storeConfig.categories);
+        }
+        if (storeConfig.services?.length) {
+            setServices(storeConfig.services);
+        }
+    }, [storeConfig.products, storeConfig.categories, storeConfig.services]);
+    useEffect(() => {
+        if (!storeConfig.id)
+            return;
+        const productsEmpty = !storeConfig.products || storeConfig.products.length === 0;
+        const categoriesEmpty = !storeConfig.categories || storeConfig.categories.length === 0;
+        const servicesEmpty = !storeConfig.services || storeConfig.services.length === 0;
+        const needProducts = fetchProducts && productsEmpty;
+        const needCategories = fetchCategories && categoriesEmpty;
+        const needServices = fetchServices && servicesEmpty;
+        if (!needProducts && !needCategories && !needServices) {
+            fetchStartedRef.current = false;
+            return;
+        }
+        if (fetchStartedRef.current)
+            return;
+        fetchStartedRef.current = true;
+        const loadCatalog = async () => {
+            setIsLoading(true);
+            startBackendLoading?.();
+            try {
+                const tasks = [];
+                if (needProducts) {
+                    tasks.push(import('../lib/services/product.service').then(async ({ productService }) => {
+                        const response = await productService.getProducts({
+                            storeId: storeConfig.id,
+                            limit: 1000,
+                        });
+                        setProducts(response.data.map((p) => transformProductToStoreProduct(p)));
+                    }));
+                }
+                if (needCategories) {
+                    tasks.push(import('../lib/services/category.service').then(async ({ categoryService }) => {
+                        const apiCategories = await categoryService.getCategories(storeConfig.id);
+                        setCategories(apiCategories.map((c) => transformCategoryToStoreCategory(c)));
+                    }));
+                }
+                if (needServices) {
+                    tasks.push(import('../lib/services/service.service').then(async ({ serviceService }) => {
+                        const apiServices = await serviceService.getServices(storeConfig.id);
+                        setServices(apiServices.map((s) => transformServiceToStoreService(s)));
+                    }));
+                }
+                await Promise.allSettled(tasks);
+            }
+            catch (error) {
+                console.error('[useCatalogLoader] Failed to fetch catalog:', error);
+            }
+            finally {
+                setIsLoading(false);
+                stopBackendLoading?.();
+                fetchStartedRef.current = false;
+            }
+        };
+        void loadCatalog();
+    }, [
+        storeConfig.id,
+        storeConfig.products,
+        storeConfig.categories,
+        storeConfig.services,
+        fetchProducts,
+        fetchCategories,
+        fetchServices,
+        startBackendLoading,
+        stopBackendLoading,
+    ]);
+    const menuItems = useMemo(() => {
+        const derived = syncFoodMenuItemsFromProducts({ ...storeConfig, products, menuItems: storeConfig.menuItems }, storeConfig.layout);
+        return derived || storeConfig.menuItems || [];
+    }, [storeConfig, products]);
+    return { products, categories, services, menuItems, isLoading };
+}