storefront-layouts-staging 1.0.0-staging.0

package/dist/lib/utils/video-helpers.js

@@ -0,0 +1,210 @@
+/**
+ * Video platform detection and URL conversion utilities
+ */
+/**
+ * Detects the video platform from a URL
+ */
+export function detectVideoPlatform(url) {
+    if (!url || typeof url !== 'string')
+        return 'unknown';
+    const normalizedUrl = url.trim().toLowerCase();
+    // YouTube detection
+    if (normalizedUrl.includes('youtube.com') ||
+        normalizedUrl.includes('youtu.be') ||
+        normalizedUrl.includes('youtube-nocookie.com')) {
+        return 'youtube';
+    }
+    // Vimeo detection
+    if (normalizedUrl.includes('vimeo.com')) {
+        return 'vimeo';
+    }
+    // Instagram detection
+    if (normalizedUrl.includes('instagram.com') || normalizedUrl.includes('instagr.am')) {
+        return 'instagram';
+    }
+    // TikTok detection
+    if (normalizedUrl.includes('tiktok.com')) {
+        return 'tiktok';
+    }
+    // Direct video file detection (common video extensions)
+    const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.m4v'];
+    if (videoExtensions.some(ext => normalizedUrl.includes(ext))) {
+        return 'direct';
+    }
+    return 'unknown';
+}
+/**
+ * Extracts video ID from YouTube URL
+ */
+function extractYouTubeId(url) {
+    const patterns = [
+        /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/)([^&\n?#]+)/,
+        /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
+    ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match && match[1]) {
+            return match[1];
+        }
+    }
+    return null;
+}
+/**
+ * Extracts video ID from Vimeo URL
+ */
+function extractVimeoId(url) {
+    const patterns = [
+        /vimeo\.com\/(\d+)/,
+        /vimeo\.com\/video\/(\d+)/,
+        /player\.vimeo\.com\/video\/(\d+)/,
+    ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match && match[1]) {
+            return match[1];
+        }
+    }
+    return null;
+}
+/**
+ * Extracts video ID from Instagram URL
+ */
+function extractInstagramId(url) {
+    // Instagram URLs can be: instagram.com/p/VIDEO_ID or instagram.com/reel/VIDEO_ID
+    const patterns = [
+        /instagram\.com\/p\/([^\/\?]+)/,
+        /instagram\.com\/reel\/([^\/\?]+)/,
+        /instagr\.am\/p\/([^\/\?]+)/,
+    ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match && match[1]) {
+            return match[1];
+        }
+    }
+    return null;
+}
+/**
+ * Extracts video ID from TikTok URL
+ */
+function extractTikTokId(url) {
+    // TikTok URLs: tiktok.com/@username/video/VIDEO_ID
+    const patterns = [
+        /tiktok\.com\/.*\/video\/(\d+)/,
+        /vm\.tiktok\.com\/([^\/\?]+)/,
+    ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match && match[1]) {
+            return match[1];
+        }
+    }
+    return null;
+}
+/**
+ * Parses a video URL and returns platform information
+ */
+export function parseVideoUrl(url) {
+    if (!url || typeof url !== 'string') {
+        return { platform: 'unknown' };
+    }
+    const platform = detectVideoPlatform(url);
+    switch (platform) {
+        case 'youtube': {
+            const videoId = extractYouTubeId(url);
+            if (!videoId) {
+                return { platform: 'unknown' };
+            }
+            return {
+                platform: 'youtube',
+                videoId,
+                embedUrl: `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&loop=1&playlist=${videoId}&controls=0&modestbranding=1&rel=0&showinfo=0`,
+                thumbnailUrl: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
+            };
+        }
+        case 'vimeo': {
+            const videoId = extractVimeoId(url);
+            if (!videoId) {
+                return { platform: 'unknown' };
+            }
+            return {
+                platform: 'vimeo',
+                videoId,
+                embedUrl: `https://player.vimeo.com/video/${videoId}?autoplay=1&loop=1&muted=1&background=1&controls=0`,
+                thumbnailUrl: `https://vumbnail.com/${videoId}.jpg`,
+            };
+        }
+        case 'instagram': {
+            const videoId = extractInstagramId(url);
+            if (!videoId) {
+                return { platform: 'unknown' };
+            }
+            // Instagram embeds require oEmbed API, so we'll use the direct URL
+            return {
+                platform: 'instagram',
+                videoId,
+                embedUrl: `https://www.instagram.com/p/${videoId}/embed/`,
+                directUrl: url,
+            };
+        }
+        case 'tiktok': {
+            const videoId = extractTikTokId(url);
+            if (!videoId) {
+                return { platform: 'unknown' };
+            }
+            // TikTok embeds are complex, return direct URL
+            return {
+                platform: 'tiktok',
+                videoId,
+                directUrl: url,
+            };
+        }
+        case 'direct': {
+            return {
+                platform: 'direct',
+                directUrl: url,
+            };
+        }
+        default:
+            return { platform: 'unknown', directUrl: url };
+    }
+}
+/**
+ * Gets embed URL for background video (autoplay, muted, loop, no controls)
+ */
+export function getBackgroundVideoEmbedUrl(url) {
+    const videoInfo = parseVideoUrl(url);
+    if (videoInfo.embedUrl) {
+        return videoInfo.embedUrl;
+    }
+    if (videoInfo.directUrl && videoInfo.platform === 'direct') {
+        return videoInfo.directUrl;
+    }
+    return null;
+}
+/**
+ * Gets embed URL for embedded video (with controls, no autoplay by default)
+ */
+export function getEmbedVideoUrl(url, autoplay = false) {
+    const videoInfo = parseVideoUrl(url);
+    if (videoInfo.platform === 'youtube' && videoInfo.videoId) {
+        return `https://www.youtube.com/embed/${videoInfo.videoId}?autoplay=${autoplay ? 1 : 0}&controls=1&modestbranding=1&rel=0`;
+    }
+    if (videoInfo.platform === 'vimeo' && videoInfo.videoId) {
+        return `https://player.vimeo.com/video/${videoInfo.videoId}?autoplay=${autoplay ? 1 : 0}&controls=1`;
+    }
+    if (videoInfo.embedUrl) {
+        return videoInfo.embedUrl;
+    }
+    if (videoInfo.directUrl && videoInfo.platform === 'direct') {
+        return videoInfo.directUrl;
+    }
+    return null;
+}
+/**
+ * Checks if a URL is a video URL (any platform)
+ */
+export function isVideoUrl(url) {
+    const platform = detectVideoPlatform(url);
+    return platform !== 'unknown';
+}

package/dist/preview/LayoutPreview.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StoreConfig, StoreLayoutType } from '../lib/store-types';
+interface LayoutPreviewProps {
+    layout: StoreLayoutType | string;
+    className?: string;
+    initialRoute?: string;
+    onRouteChange?: (route: string) => void;
+    config?: StoreConfig | null;
+    /** When true (e.g. store-setup editor iframe), allow pointer events — default false for static thumbnails */
+    interactive?: boolean;
+}
+export declare const LayoutPreview: React.NamedExoticComponent<LayoutPreviewProps>;
+export {};
+//# sourceMappingURL=LayoutPreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPreview.d.ts","sourceRoot":"","sources":["../../src/preview/LayoutPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQjE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,6GAA6G;IAC7G,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwJD,eAAO,MAAM,aAAa,gDAExB,CAAC"}

package/dist/preview/LayoutPreview.js

@@ -0,0 +1,122 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { getPreviewDataByLayout } from '../lib/preview-data.js';
+import { ToastProvider } from '../components/ui/toast.js';
+import { AlertModalProvider } from '../components/ui/alert-modal.js';
+import { StoreProvider } from '../lib/store-context.js';
+import { LoadingProvider } from '../lib/loading-context.js';
+import { PreviewRouter } from './PreviewRouter.js';
+/**
+ * LayoutPreview Component
+ *
+ * Optimized for memory efficiency and performance.
+ */
+function LayoutPreviewWithRouter({ layout, className, initialRoute, onRouteChange, config, interactive = false, }) {
+    const [currentRoute, setCurrentRoute] = useState(initialRoute || '/');
+    const [isClient, setIsClient] = useState(false);
+    // Memoize preview data to prevent unnecessary recalculations
+    const previewData = useMemo(() => {
+        const layoutString = typeof layout === 'string' ? layout : String(layout || 'clothing');
+        if (config) {
+            return {
+                ...config,
+                layout: ((typeof config.layout === 'string' ? config.layout : layoutString) || layoutString),
+            };
+        }
+        return getPreviewDataByLayout(layoutString);
+    }, [config, layout]);
+    // Read route from URL safely
+    const getRouteFromUrl = useCallback(() => {
+        if (typeof window === 'undefined')
+            return '/';
+        const urlParams = new URLSearchParams(window.location.search);
+        const routeParam = urlParams.get('route');
+        if (!routeParam)
+            return '/';
+        try {
+            const decoded = decodeURIComponent(routeParam);
+            return decoded.startsWith('/') ? decoded : `/${decoded}`;
+        }
+        catch {
+            return routeParam.startsWith('/') ? routeParam : `/${routeParam}`;
+        }
+    }, []);
+    // Sync initial route from URL or prop
+    useEffect(() => {
+        setIsClient(true);
+        const urlRoute = getRouteFromUrl();
+        if (urlRoute !== '/') {
+            setCurrentRoute(urlRoute);
+        }
+        else if (initialRoute) {
+            setCurrentRoute(initialRoute.startsWith('/') ? initialRoute : `/${initialRoute}`);
+        }
+    }, []);
+    // CRITICAL: Update route when initialRoute prop changes (e.g., from UPDATE_ROUTE message)
+    // This ensures the preview updates when the editor switches pages
+    useEffect(() => {
+        if (!isClient)
+            return;
+        if (initialRoute) {
+            const normalizedRoute = initialRoute.startsWith('/') ? initialRoute : `/${initialRoute}`;
+            if (currentRoute !== normalizedRoute) {
+                setCurrentRoute(normalizedRoute);
+            }
+        }
+    }, [initialRoute, isClient, currentRoute]);
+    // Single source of truth for URL changes
+    useEffect(() => {
+        if (!isClient)
+            return;
+        const syncRoute = () => {
+            const newRoute = getRouteFromUrl();
+            setCurrentRoute(prev => {
+                if (prev !== newRoute) {
+                    onRouteChange?.(newRoute);
+                    return newRoute;
+                }
+                return prev;
+            });
+        };
+        window.addEventListener('popstate', syncRoute);
+        return () => window.removeEventListener('popstate', syncRoute);
+    }, [isClient, getRouteFromUrl, onRouteChange]);
+    const handleNavigate = useCallback((route) => {
+        const normalized = route.startsWith('/') ? route : `/${route}`;
+        setCurrentRoute(normalized);
+        onRouteChange?.(normalized);
+        if (typeof window !== 'undefined') {
+            const newUrl = new URL(window.location.href);
+            newUrl.searchParams.set('route', normalized);
+            window.history.pushState({ route: normalized }, '', newUrl.toString());
+            // Only dispatch if necessary to avoid excessive cycles
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        }
+    }, [onRouteChange]);
+    if (!isClient) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-screen bg-gray-50/10", children: _jsx("div", { className: "w-6 h-6 border-2 border-blue-600/20 border-t-blue-600 rounded-full animate-spin" }) }));
+    }
+    // CSS variables for theming
+    const themeStyle = {
+        '--store-primary': previewData?.branding.primaryColor || '#000',
+        '--store-secondary': previewData?.branding.secondaryColor || previewData?.branding.primaryColor || '#000',
+        '--store-accent': previewData?.branding.accentColor || previewData?.branding.primaryColor || '#000',
+    };
+    const nonInteractiveStyle = interactive
+        ? {}
+        : {
+            pointerEvents: 'none',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
+        };
+    return (_jsx("div", { style: {
+            ...themeStyle,
+            ...nonInteractiveStyle,
+        }, className: `min-h-screen w-full flex flex-col ${className || ''}`, children: _jsx(ToastProvider, { children: _jsx(AlertModalProvider, { children: _jsx(StoreProvider, { initialConfig: previewData, storeSlug: previewData?.slug || '', children: _jsx(LoadingProvider, { children: _jsx(PreviewRouter, { storeConfig: previewData, route: currentRoute, onNavigate: handleNavigate }) }) }) }) }) }));
+}
+export const LayoutPreview = React.memo(function LayoutPreview(props) {
+    return _jsx(LayoutPreviewWithRouter, { ...props });
+});

package/dist/preview/PreviewRouter.d.ts

@@ -0,0 +1,9 @@
+import { StoreConfig } from '../lib/store-types';
+interface PreviewRouterProps {
+    storeConfig: StoreConfig;
+    route: string;
+    onNavigate?: (route: string) => void;
+}
+export declare function PreviewRouter({ storeConfig: initialStoreConfig, route, onNavigate }: PreviewRouterProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PreviewRouter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewRouter.d.ts","sourceRoot":"","sources":["../../src/preview/PreviewRouter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAuIhD,UAAU,kBAAkB;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,kBAAkB,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CAmXvG"}