@pack/react 2.0.0 → 2.0.1

package/dist/preview/preview-content.d.ts

@@ -10,17 +10,19 @@ type PreviewContextValue = {
     };
     siteSettings: any;
     setSiteSettings: (siteSettings: any) => void;
-    content: any;
-    setContent: (content: any) => void;
+    previewContent: any;
+    setPreviewContent: (content: any) => void;
     pathname: string;
+    contentEnvironment: string;
 };
 export declare const PreviewContext: React.Context<PreviewContextValue>;
 export declare const usePreviewContext: () => PreviewContextValue;
 interface PreviewProviderProps {
-    children: (sections: ReactNode) => ReactNode;
+    children: ReactNode;
     siteSettings: any;
     pathname: string;
     isPreviewModeEnabled?: boolean;
+    contentEnvironment?: string;
     customizerMeta?: {
         overlay?: {
             src?: string;
@@ -29,10 +31,10 @@ interface PreviewProviderProps {
         [key: string]: any;
     };
 }
-export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, pathname, }: PreviewProviderProps): React.JSX.Element;
+export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings: previewStorefrontSettings, customizerMeta, pathname, contentEnvironment, }: PreviewProviderProps): React.JSX.Element;
 export declare function RenderContent({ content }: {
     content: any;
-}): null;
+}): React.JSX.Element;
 export declare function usePackContent(content: any): void;
 export {};
 //# sourceMappingURL=preview-content.d.ts.map

package/dist/preview/preview-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,oCAQzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC;AAElE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IAC7C,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,QAAQ,GACT,EAAE,oBAAoB,qBAyCtB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,QAQ1D;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,QAQ1C"}
+{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,GAAG,CAAC;IAClB,eAAe,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,GAAG,CAAC;IACpB,iBAAiB,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,cAAc,oCASzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC;AAElE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAA4B,EAC5B,YAAY,EAAE,yBAAyB,EACvC,cAAc,EACd,QAAQ,EACR,kBAAuB,GACxB,EAAE,oBAAoB,qBAoCtB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,qBAe1D;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,QAS1C"}

package/dist/preview/preview-content.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useMemo, } from "react";
+import React, { createContext, useContext, useState, useMemo, } from "react";
 import { RenderSections } from "./render-sections";
 import { usePackTrack } from "./pack-analytics";
 import { PreviewToast } from "./preview-toast";
@@ -7,13 +7,14 @@ export const PreviewContext = createContext({
     setSiteSettings: () => { },
     siteSettings: undefined,
     customizerMeta: undefined,
-    content: null,
-    setContent: () => { },
+    previewContent: null,
+    setPreviewContent: () => { },
     pathname: "",
+    contentEnvironment: "",
 });
 export const usePreviewContext = () => useContext(PreviewContext);
-export function PreviewProvider({ children, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, pathname, }) {
-    const [content, setContent] = useState(null);
+export function PreviewProvider({ children, isPreviewModeEnabled = false, siteSettings: previewStorefrontSettings, customizerMeta, pathname, contentEnvironment = "", }) {
+    const [previewContent, setPreviewContent] = useState(null);
     const [siteSettings, setSiteSettings] = useState(previewStorefrontSettings);
     usePackTrack();
     const value = useMemo(() => ({
@@ -21,37 +22,41 @@ export function PreviewProvider({ children, isPreviewModeEnabled = false, siteSe
         customizerMeta,
         siteSettings,
         setSiteSettings,
-        content,
-        setContent,
+        previewContent,
+        setPreviewContent,
         pathname,
+        contentEnvironment,
     }), [
         isPreviewModeEnabled,
         siteSettings,
         customizerMeta,
         setSiteSettings,
-        content,
+        previewContent,
         pathname,
+        contentEnvironment,
     ]);
-    // Clear content when navigating to a new page
-    useEffect(() => {
-        content && setContent(null);
-    }, [pathname]);
-    const sections = content ? React.createElement(RenderSections, null) : null;
     return (React.createElement(PreviewContext.Provider, { value: value },
-        children(sections),
+        children,
         React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));
 }
 export function RenderContent({ content }) {
-    const { setContent } = usePreviewContext();
-    useEffect(() => {
-        setContent(content);
-    }, [content, setContent]);
-    return null;
+    const { isPreview, setPreviewContent } = usePreviewContext();
+    // Update content in context for preview mode
+    useMemo(() => {
+        setPreviewContent(content);
+    }, [content, setPreviewContent]);
+    // If in preview mode, RenderSections will handle rendering with live content
+    if (isPreview) {
+        return React.createElement(RenderSections, null);
+    }
+    // For SSR, pass the content directly
+    return React.createElement(RenderSections, { content: content });
 }
 export function usePackContent(content) {
-    const context = usePreviewContext();
-    useEffect(() => {
-        context.setContent(content);
-    }, [content, context]);
+    const { setPreviewContent } = usePreviewContext();
+    // Update preview content
+    useMemo(() => {
+        setPreviewContent(content);
+    }, [content, setPreviewContent]);
     return;
 }

package/dist/preview/render-sections.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
-export declare function useSections(): any;
-export declare function RenderSections(): React.JSX.Element | null;
+interface RenderSectionsProps {
+    content?: any;
+}
+export declare function RenderSections(props: RenderSectionsProps): React.JSX.Element | null;
+export declare function useSections(props: RenderSectionsProps): any;
+export {};
 //# sourceMappingURL=render-sections.d.ts.map

package/dist/preview/render-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/preview/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA6DlD,wBAAgB,WAAW,QAM1B;AAED,wBAAgB,cAAc,6BAM7B"}
+{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../../src/preview/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAoCvC,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAuBD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAOxD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,mBAAmB,OAMrD"}

package/dist/preview/render-sections.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import { useMatches } from "@remix-run/react";
 import { usePreviewContext } from "./preview-content";
 import { sectionMap } from "../register-section";
 import { storefrontSettingsSchema } from "../register-storefront-settings-schema";
@@ -26,35 +25,34 @@ function Sections({ sections }) {
     }, [sections]);
     return React.createElement(React.Fragment, null, renderedSections);
 }
-function useRenderSections() {
-    const [root] = useMatches();
-    const { ENV } = root?.data;
-    const { content: liveContent } = useCustomizerShell({
-        environment: ENV?.PUBLIC_PACK_CONTENT_ENVIRONMENT,
-        sectionComponents: sectionMap,
-        storefrontSettingsSchema,
-    });
-    useOverlayScript();
-    const sections = useMemo(() => {
+function useRenderSections({ content: ssrContent }) {
+    const { previewContent, isPreview, contentEnvironment } = usePreviewContext();
+    // In preview mode, use the customizer shell to get live content
+    if (isPreview) {
+        const { content: liveContent } = useCustomizerShell({
+            environment: contentEnvironment,
+            sectionComponents: sectionMap,
+            storefrontSettingsSchema,
+        });
         return liveContent?.sections?.nodes || liveContent?.sections;
-    }, [liveContent?.sections]);
-    return {
-        sections,
-    };
+    }
+    // For SSR and non-preview mode, use the passed in content
+    const contentToRender = ssrContent || previewContent;
+    if (!contentToRender)
+        return null;
+    return contentToRender?.sections?.nodes || contentToRender?.sections;
 }
-export function useSections() {
-    const { sections } = useRenderSections();
+export function RenderSections(props) {
+    useOverlayScript();
+    const sections = useRenderSections(props);
     if (!sections)
         return null;
-    const visibleSections = Sections({ sections });
-    return visibleSections?.props?.children || null;
+    return React.createElement(Sections, { sections: sections });
 }
-export function RenderSections() {
-    const { content } = usePreviewContext();
-    if (!content)
-        return null;
-    const { sections } = useRenderSections();
+export function useSections(props) {
+    const sections = useRenderSections(props);
     if (!sections)
         return null;
-    return React.createElement(Sections, { sections: sections });
+    const visibleSections = Sections({ sections });
+    return visibleSections?.props?.children || null;
 }

package/dist/use-customizer-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,kBAAkB;iBAKhB,MAAM;uBACA,GAAG;+BACK,GAAG;;;CAiQ/B,CAAC"}
+{"version":3,"file":"use-customizer-shell.d.ts","sourceRoot":"","sources":["../src/use-customizer-shell.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,kBAAkB;iBAKhB,MAAM;uBACA,GAAG;+BACK,GAAG;;;CAsQ/B,CAAC"}

package/dist/use-customizer-shell.js

@@ -2,14 +2,14 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "
 import { VERSION } from "./version";
 import { PreviewContext } from "./preview/preview-content";
 export const useCustomizerShell = ({ environment, sectionComponents, storefrontSettingsSchema, }) => {
-    const { content, isPreview, pathname, setContent, setSiteSettings } = useContext(PreviewContext);
+    const { previewContent, isPreview, pathname, setPreviewContent, setSiteSettings, } = useContext(PreviewContext);
     const data = {
-        content,
-        template: content.template?.type,
-        templateType: content.template?.type,
-        handle: content.handle,
-        title: content.title,
-        description: content.description,
+        content: previewContent,
+        template: previewContent?.template?.type,
+        templateType: previewContent?.template?.type,
+        handle: previewContent?.handle,
+        title: previewContent?.title,
+        description: previewContent?.description,
     };
     const [hasInit, setHasInit] = useState(false);
     const pendingMessagesRef = useRef(new Map());
@@ -95,7 +95,7 @@ export const useCustomizerShell = ({ environment, sectionComponents, storefrontS
                     }
                     break;
                 case "SET_PAGE_DATA":
-                    setContent(message.pack.data?.content);
+                    setPreviewContent(message.pack.data?.content);
                     break;
                 case "SET_STOREFRONT_SETTINGS":
                     setSiteSettings({
@@ -200,12 +200,12 @@ export const useCustomizerShell = ({ environment, sectionComponents, storefrontS
     ]);
     if (!isPreview) {
         return {
-            content,
+            content: previewContent,
         };
     }
     return useMemo(() => {
-        return { content };
-    }, [content]);
+        return { content: previewContent };
+    }, [previewContent]);
 };
 const useCanConnectCheck = ({ isPreview }) => {
     const [canConnect, setCanConnect] = useState(false);

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0";
+export const VERSION = "2.0.1";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pack/react",
   "description": "React",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "engines": {

package/dist/pack/pack-analytics.d.ts

@@ -1,16 +0,0 @@
-export type BrowserData = {
-    userAgent: string;
-    pathname: string;
-    query: string;
-    screen: string;
-    referrer: string;
-    hostname: string;
-    language: string;
-    locale: string;
-    userTimeZone: string;
-    connection: string;
-    deviceCategory: string;
-    href: string;
-};
-export declare function usePackTrack(): void;
-//# sourceMappingURL=pack-analytics.d.ts.map

package/dist/pack/pack-analytics.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pack-analytics.d.ts","sourceRoot":"","sources":["../../src/pack/pack-analytics.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAiDF,wBAAgB,YAAY,SA0B3B"}

package/dist/pack/pack-analytics.js

@@ -1,65 +0,0 @@
-import { useEffect, useState } from "react";
-function getBrowserData() {
-    let userTimeZone;
-    let userLocale;
-    try {
-        userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        userLocale =
-            navigator.languages && navigator.languages.length
-                ? navigator.languages[0]
-                : navigator.userLanguage ||
-                    navigator.language ||
-                    navigator.browserLanguage ||
-                    "unknown";
-    }
-    catch (error) { }
-    const connection = navigator.connection ||
-        navigator.mozConnection ||
-        navigator.webkitConnection;
-    const minWidth = 768;
-    // prettier-ignore
-    const hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-    let deviceCategory = "desktop";
-    if (hasTouchSupport) {
-        const hasSmallScreen = window.screen.width < minWidth;
-        deviceCategory = hasSmallScreen ? "mobile" : "tablet";
-    }
-    return {
-        userAgent: window.navigator.userAgent,
-        pathname: window.location.pathname,
-        query: window.location.search,
-        screen: `${window.screen.width}x${window.screen.height}`,
-        referrer: document.referrer,
-        hostname: window.location.hostname,
-        language: navigator.language,
-        locale: userLocale,
-        userTimeZone: userTimeZone || "unknown",
-        connection: connection?.effectiveType || "unknown",
-        deviceCategory,
-        href: window.location.href,
-    };
-}
-export function usePackTrack() {
-    const [pathname, setPathname] = useState();
-    const analytics = async () => {
-        const browserData = getBrowserData();
-        if (pathname === browserData.pathname)
-            return;
-        setPathname(browserData.pathname);
-        try {
-            await fetch("/pack/track", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(getBrowserData()),
-            });
-        }
-        catch (error) {
-            console.error("Error hit /pack/track: ", error.message);
-        }
-    };
-    useEffect(() => {
-        analytics();
-    }, [analytics]);
-}

package/dist/pack/pack-context.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-type PackCustomizerMeta = {
-    environment?: string;
-    overlay?: {
-        src?: string;
-        version?: string;
-    };
-    [key: string]: any;
-};
-export type PackContextValue = {
-    isPreview: boolean;
-    siteSettings: any;
-    customizerMeta?: PackCustomizerMeta | null;
-    previewStorefrontSettings?: any;
-    setPreviewStorefrontSettings: (siteSettings: any) => void;
-};
-export declare const PackContext: import("react").Context<PackContextValue>;
-export declare const usePackContext: () => PackContextValue;
-export declare const PreviewContext: import("react").Context<PackContextValue>;
-export declare const usePreviewContext: () => PackContextValue;
-export {};
-//# sourceMappingURL=pack-context.d.ts.map

package/dist/pack/pack-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pack-context.d.ts","sourceRoot":"","sources":["../../src/pack/pack-context.tsx"],"names":[],"mappings":";AAEA,KAAK,kBAAkB,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,WAAW,2CAKtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAgC,CAAC;AAE5D,eAAO,MAAM,cAAc,2CAAc,CAAC;AAE1C,eAAO,MAAM,iBAAiB,wBAAiB,CAAC"}

package/dist/pack/pack-context.js

@@ -1,10 +0,0 @@
-import { createContext, useContext } from "react";
-export const PackContext = createContext({
-    isPreview: false,
-    setPreviewStorefrontSettings: () => { },
-    siteSettings: undefined,
-    customizerMeta: undefined,
-});
-export const usePackContext = () => useContext(PackContext);
-export const PreviewContext = PackContext;
-export const usePreviewContext = usePackContext;

package/dist/pack/pack-provider.d.ts

@@ -1,12 +0,0 @@
-import React, { ReactNode } from "react";
-import { PackContextValue } from "./pack-context";
-interface PackContentProps {
-    children: ReactNode;
-    siteSettings: any;
-    isPreviewModeEnabled?: boolean;
-    customizerMeta?: PackContextValue["customizerMeta"];
-}
-export declare function PackProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }: PackContentProps): React.JSX.Element;
-export declare const PreviewProvider: typeof PackProvider;
-export {};
-//# sourceMappingURL=pack-provider.d.ts.map

package/dist/pack/pack-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pack-provider.d.ts","sourceRoot":"","sources":["../../src/pack/pack-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AACnD,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI/D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,oBAAoB,EACpB,YAAY,EACZ,cAAc,GACf,EAAE,gBAAgB,qBAqBlB;AAED,eAAO,MAAM,eAAe,qBAAe,CAAC"}

package/dist/pack/pack-provider.js

@@ -1,18 +0,0 @@
-import React, { useState } from "react";
-import { PackContext } from "./pack-context";
-import { usePackTrack } from "./pack-analytics";
-import { PreviewToast } from "./preview-toast";
-export function PackProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }) {
-    const [previewStorefrontSettings, setPreviewStorefrontSettings] = useState();
-    usePackTrack();
-    return (React.createElement(PackContext.Provider, { value: {
-            isPreview: !!isPreviewModeEnabled,
-            previewStorefrontSettings,
-            setPreviewStorefrontSettings,
-            siteSettings,
-            customizerMeta,
-        } },
-        children,
-        React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));
-}
-export const PreviewProvider = PackProvider;

package/dist/pack/preview-toast.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-interface PreviewToastProps {
-    isPreviewModeEnabled: boolean;
-}
-export declare const PreviewToast: ({ isPreviewModeEnabled }: PreviewToastProps) => React.JSX.Element | null;
-export {};
-//# sourceMappingURL=preview-toast.d.ts.map

package/dist/pack/preview-toast.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-toast.d.ts","sourceRoot":"","sources":["../../src/pack/preview-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,iBAAiB;IACzB,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAsBD,eAAO,MAAM,YAAY,6BAA8B,iBAAiB,6BA+GvE,CAAC"}

package/dist/pack/preview-toast.js

@@ -1,85 +0,0 @@
-import React, { useEffect, useState } from "react";
-const Eye = (props) => {
-    return (React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.75 12c0-.338.136-.905.493-1.591a7.858 7.858 0 0 1 1.64-2.108C6.374 6.926 8.694 5.75 12 5.75c3.308 0 5.627 1.176 7.116 2.551a7.86 7.86 0 0 1 1.64 2.108c.358.686.494 1.253.494 1.591 0 .338-.136.905-.493 1.591a7.86 7.86 0 0 1-1.64 2.108c-1.49 1.375-3.81 2.551-7.117 2.551-3.308 0-5.627-1.176-7.116-2.551a7.858 7.858 0 0 1-1.64-2.108c-.358-.686-.494-1.253-.494-1.591ZM12 4.25c-3.692 0-6.373 1.324-8.134 2.949a9.356 9.356 0 0 0-1.953 2.517c-.424.814-.663 1.622-.663 2.284 0 .662.24 1.47.663 2.284a9.356 9.356 0 0 0 1.953 2.517C5.627 18.426 8.308 19.75 12 19.75s6.373-1.324 8.134-2.949a9.356 9.356 0 0 0 1.953-2.517c.424-.814.663-1.622.663-2.284 0-.662-.24-1.47-.663-2.284a9.355 9.355 0 0 0-1.953-2.517C18.373 5.574 15.692 4.25 12 4.25ZM9.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z", fill: "currentColor" })));
-};
-export const PreviewToast = ({ isPreviewModeEnabled }) => {
-    const [showToast, setShowToast] = useState(false);
-    const exitPreviewMode = async () => {
-        try {
-            const response = await fetch("/api/edit", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/x-www-form-urlencoded",
-                },
-            });
-            if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
-            }
-            window.location.reload();
-        }
-        catch (error) {
-            console.error("Error exiting preview:", error.message);
-        }
-    };
-    useEffect(() => {
-        const isIframe = window.self !== window.top;
-        if (isPreviewModeEnabled && !isIframe) {
-            setShowToast(true);
-        }
-    }, [isPreviewModeEnabled]);
-    if (showToast) {
-        return (React.createElement("div", { style: {
-                position: "fixed",
-                zIndex: "2147483647",
-                left: "50%",
-                transform: "translateX(-50%)",
-                padding: "0 16px",
-                bottom: "16px",
-                width: "100%",
-                pointerEvents: "none",
-            } },
-            React.createElement("div", { style: {
-                    margin: "0 auto",
-                    pointerEvents: "auto",
-                    maxWidth: "640px",
-                    boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10)",
-                    width: "100%",
-                    padding: "8px 16px",
-                    backgroundColor: "#1f2937",
-                    color: "#f9fafb",
-                    borderRadius: "8px",
-                    display: "flex",
-                    alignItems: "center",
-                    fontFamily: '"Inter", sans-serif',
-                    justifyContent: "space-between",
-                    gap: "8px",
-                } },
-                React.createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
-                        overflow: "hidden",
-                    } },
-                    React.createElement(Eye, { style: { width: 16, height: 16, minWidth: 16 } }),
-                    React.createElement("p", { style: {
-                            flex: 1,
-                            fontSize: "14px",
-                            lineHeight: "20px",
-                            whiteSpace: "nowrap",
-                            textOverflow: "ellipsis",
-                            overflow: "hidden",
-                        } }, "You are currently previewing your storefront with draft content")),
-                React.createElement("span", { role: "button", tabIndex: 0, onClick: exitPreviewMode, onKeyDown: (e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                            exitPreviewMode();
-                        }
-                    }, style: {
-                        cursor: "pointer",
-                        fontSize: 13,
-                        fontWeight: "500",
-                        flexShrink: "0",
-                    } }, "Exit preview mode"))));
-    }
-    return null;
-};

package/dist/preview/preview-provider.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-interface PreviewProviderProps {
-    customizerMeta?: any;
-    isPreviewModeEnabled?: boolean;
-    siteSettings?: any;
-    location?: Location;
-    children: (sections: React.ReactNode) => React.ReactNode;
-}
-export declare function PreviewProvider({ customizerMeta, isPreviewModeEnabled, siteSettings, location, children, }: PreviewProviderProps): void;
-export {};
-//# sourceMappingURL=preview-provider.d.ts.map

package/dist/preview/preview-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":";AAAA,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1D;AAED,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,oBAAoB,QAWtB"}

package/dist/preview/preview-provider.js

@@ -1,11 +0,0 @@
-export function PreviewProvider({ customizerMeta, isPreviewModeEnabled, siteSettings, location, children, }) {
-    const { content, storefrontSettings } = useCustomizerShell({
-        environment: customizerMeta?.environment,
-        isPreview: isPreviewModeEnabled,
-        sectionComponents: customizerMeta?.sectionComponents,
-        data: customizerMeta,
-        storefrontSettingsSchema: siteSettings?.schema,
-        location,
-    });
-    // ... rest of the component remains the same ...
-}

package/dist/render-sections.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-export declare function useSections({ content }: any): any;
-type RenderSectionProps = {
-    pathname?: string;
-};
-export declare function RenderSections({ pathname }: RenderSectionProps): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=render-sections.d.ts.map

package/dist/render-sections.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAqFlD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,OAM3C;AAED,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,4BAM9D"}

package/dist/render-sections.js

@@ -1,75 +0,0 @@
-import React, { useEffect, useMemo } from "react";
-import { useMatches } from "@remix-run/react";
-import { useCustomizerShell } from "./use-customizer-shell";
-import { usePreviewContext } from "./preview/preview-content";
-import { sectionMap } from "./register-section";
-import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
-import { useOverlayScript } from "./use-overlay-script";
-function Sections({ sections }) {
-    const renderedSections = useMemo(() => {
-        return sections
-            .map((section) => {
-            // TODO: Return a consistent data structure from the API and the customizer
-            // Normalize section data
-            const key = section.id || section.clientId;
-            const data = section.data || section;
-            // Attach dataSource to the provided cms data
-            data.dataSource = section.dataSource;
-            const schemaKey = data._template;
-            const Component = sectionMap.get(schemaKey);
-            if (!Component)
-                return null;
-            return data?.sectionVisibility === "hidden" ? null : (React.createElement("section", { key: key, "data-comp": schemaKey, "data-comp-id": key },
-                React.createElement(Component, { "comp-name": schemaKey, cms: data })));
-        })
-            .filter(Boolean);
-    }, [sections]);
-    return React.createElement(React.Fragment, null, renderedSections);
-}
-function useRenderSections({ content, pathname, }) {
-    const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePreviewContext();
-    const [root] = useMatches();
-    const { ENV } = root?.data;
-    const { content: liveContent, storefrontSettings } = useCustomizerShell({
-        environment: ENV?.PUBLIC_PACK_CONTENT_ENVIRONMENT,
-        isPreview,
-        sectionComponents: sectionMap,
-        data: {
-            content,
-            template: content.template?.type,
-            templateType: content.template?.type,
-            handle: content.handle,
-            title: content.title,
-            description: content.description,
-        },
-        storefrontSettingsSchema,
-        pathname,
-    });
-    useOverlayScript({ isPreview, overlay: customizerMeta?.overlay || {} });
-    useEffect(() => {
-        storefrontSettings &&
-            setPreviewStorefrontSettings({ settings: storefrontSettings });
-    }, [setPreviewStorefrontSettings, storefrontSettings]);
-    const sections = useMemo(() => {
-        return liveContent?.sections?.nodes || liveContent?.sections;
-    }, [liveContent?.sections]);
-    return {
-        sections,
-    };
-}
-export function useSections({ content }) {
-    const { sections } = useRenderSections({ content });
-    if (!sections)
-        return null;
-    const visibleSections = Sections({ sections });
-    return visibleSections?.props?.children || null;
-}
-export function RenderSections({ pathname }) {
-    const { content } = usePreviewContext();
-    if (!content)
-        return null;
-    const { sections } = useRenderSections({ content, pathname });
-    if (!sections)
-        return null;
-    return React.createElement(Sections, { sections: sections });
-}