@gem-sdk/pages 1.41.9 → 1.42.0-dev.60

package/dist/esm/components/builder/Header.js

@@ -0,0 +1,181 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
+import Devices from './SwitchView.js';
+
+const defaultMargin = {
+    desktop: '16px',
+    tablet: '16px',
+    mobile: '16px'
+};
+const HEADER_ON_COLOR = '#E2E2E2';
+const HEADER_OFF_COLOR = '#F4F4F4';
+const sizeCheck = {
+    desktop: '24px',
+    tablet: '36px',
+    mobile: '36px'
+};
+const Header = (props)=>{
+    const { pageType, isOriginTemplate } = props;
+    const layoutSetting = useShopStore((s)=>s.layoutSettings);
+    const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
+    const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Devices, {}),
+            /*#__PURE__*/ jsx("div", {
+                className: cls('gp-header-container gp-border-1 gp-group gp-relative gp-flex gp-justify-center gp-border-b gp-border-[#EEEEEE] gp-font-sans'),
+                children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsx("div", {
+                    className: "gp-flex gp-flex-1 gp-items-center gp-justify-between",
+                    style: {
+                        maxWidth: `var(--g-ct-w, 1200px)`,
+                        ...makeStyleResponsive('ml', defaultMargin),
+                        ...makeStyleResponsive('mr', defaultMargin)
+                    },
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "tablet:gp-items-center gp-flex gp-py-3",
+                        children: [
+                            /*#__PURE__*/ jsxs("svg", {
+                                style: {
+                                    ...makeStyleResponsive('w', sizeCheck),
+                                    ...makeStyleResponsive('h', sizeCheck)
+                                },
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: [
+                                    /*#__PURE__*/ jsx("path", {
+                                        d: "M15.7244 10.6242C15.9587 10.3899 15.9587 10.01 15.7244 9.77571C15.49 9.5414 15.1101 9.5414 14.8758 9.77571L11.1001 13.5514L9.42436 11.8757C9.19005 11.6414 8.81015 11.6414 8.57583 11.8757C8.34152 12.11 8.34152 12.4899 8.57583 12.7242L10.6758 14.8242C10.9101 15.0586 11.29 15.0586 11.5244 14.8242L15.7244 10.6242Z",
+                                        fill: "#197BBD"
+                                    }),
+                                    /*#__PURE__*/ jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M20.4001 12C20.4001 16.6392 16.6393 20.4 12.0001 20.4C7.36091 20.4 3.6001 16.6392 3.6001 12C3.6001 7.36078 7.36091 3.59998 12.0001 3.59998C16.6393 3.59998 20.4001 7.36078 20.4001 12ZM19.2001 12C19.2001 15.9764 15.9765 19.2 12.0001 19.2C8.02365 19.2 4.8001 15.9764 4.8001 12C4.8001 8.02352 8.02365 4.79998 12.0001 4.79998C15.9765 4.79998 19.2001 8.02352 19.2001 12Z",
+                                        fill: "#197BBD"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "gp-ml-4",
+                                children: [
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "gp-text-sm",
+                                        children: "Order #1001"
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        children: "You’ve paid for your order."
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "gp-mt-1 gp-flex gp-items-center gp-text-[#197BBD]",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "gp-text-sm",
+                                                children: "View order confirmation"
+                                            }),
+                                            /*#__PURE__*/ jsx("svg", {
+                                                width: "12",
+                                                height: "13",
+                                                viewBox: "0 0 12 13",
+                                                fill: "none",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                children: /*#__PURE__*/ jsx("path", {
+                                                    fillRule: "evenodd",
+                                                    clipRule: "evenodd",
+                                                    d: "M4.6318 9.21817C4.45607 9.04244 4.45607 8.75751 4.6318 8.58178L6.7136 6.49998L4.6318 4.41817C4.45607 4.24244 4.45607 3.95751 4.6318 3.78178C4.80754 3.60604 5.09246 3.60604 5.2682 3.78178L7.6682 6.18178C7.84393 6.35751 7.84393 6.64244 7.6682 6.81817L5.2682 9.21817C5.09246 9.39391 4.80754 9.39391 4.6318 9.21817Z",
+                                                    fill: "#197BBD"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }) : /*#__PURE__*/ jsxs("div", {
+                    className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
+                    style: {
+                        maxWidth: `var(--g-ct-w)`,
+                        ...makeStyleResponsive('ml', defaultMargin),
+                        ...makeStyleResponsive('mr', defaultMargin)
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs("svg", {
+                            width: "60",
+                            height: "8",
+                            viewBox: "0 0 60 8",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
+                                    fill: "#9E9E9E"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M28 4C28 1.79086 29.7909 0 32 0H56C58.2091 0 60 1.79086 60 4C60 6.20914 58.2091 8 56 8H32C29.7909 8 28 6.20914 28 4Z",
+                                    fill: headerColor
+                                })
+                            ]
+                        }),
+                        !isOriginTemplate && /*#__PURE__*/ jsx("div", {
+                            className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: /*#__PURE__*/ jsxs("svg", {
+                                            width: "14",
+                                            height: "14",
+                                            viewBox: "0 0 14 14",
+                                            fill: "none",
+                                            xmlns: "http://www.w3.org/2000/svg",
+                                            children: [
+                                                /*#__PURE__*/ jsx("path", {
+                                                    fillRule: "evenodd",
+                                                    clipRule: "evenodd",
+                                                    d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
+                                                    fill: "#212121"
+                                                }),
+                                                /*#__PURE__*/ jsx("path", {
+                                                    fillRule: "evenodd",
+                                                    clipRule: "evenodd",
+                                                    d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
+                                                    fill: "#212121"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: "Header"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs("svg", {
+                            width: "80",
+                            height: "8",
+                            viewBox: "0 0 80 8",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
+                                    fill: headerColor
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M28 4C28 1.79086 29.7909 0 32 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H32C29.7909 8 28 6.20914 28 4Z",
+                                    fill: headerColor
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M56 4C56 1.79086 57.7909 0 60 0H76C78.2091 0 80 1.79086 80 4C80 6.20914 78.2091 8 76 8H60C57.7909 8 56 6.20914 56 4Z",
+                                    fill: headerColor
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { Header as default };

package/dist/esm/components/builder/SwitchView.js

@@ -0,0 +1,179 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { devices } from './const.js';
+
+const Devices = ()=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const initialDeviceState = {
+        width: 0,
+        name: '',
+        activeId: null
+    };
+    const [deviceState, setDeviceState] = useState(initialDeviceState);
+    const [isShowSwitchView, setIsShowSwitchView] = useState(false);
+    const updateDeviceState = useCallback((updates)=>{
+        setDeviceState((prevState)=>({
+                ...prevState,
+                ...updates
+            }));
+    }, [
+        setDeviceState
+    ]);
+    useEffect(()=>{
+        if (!deviceState) {
+            const activeDevice = devices[0];
+            if (activeDevice) {
+                updateDeviceState({
+                    width: activeDevice.width,
+                    name: activeDevice.name,
+                    activeId: activeDevice.id
+                });
+            }
+            setIsShowSwitchView(false);
+        } else {
+            setIsShowSwitchView(deviceState.width > 0 && deviceState.width <= 1024);
+        }
+    }, [
+        deviceState,
+        updateDeviceState
+    ]);
+    const onHandleClick = (id)=>{
+        const activeDevice = devices.find((v)=>v.id === id);
+        if (activeDevice) {
+            updateDeviceState({
+                width: activeDevice.width,
+                name: activeDevice.name,
+                activeId: activeDevice.id
+            });
+            emitChangeDevice(activeDevice.id);
+        }
+        setIsOpen(!isOpen);
+    };
+    const emitChangeDevice = (id)=>{
+        const event = new CustomEvent('editor:change-device', {
+            bubbles: true,
+            detail: {
+                id
+            }
+        });
+        window.dispatchEvent(event);
+    };
+    const switchViewRef = useRef(null);
+    const onClickOutside = (event)=>{
+        if (switchViewRef.current && !switchViewRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    const getDisplayName = (width)=>{
+        const activeDevice = devices.find((v)=>v.width === width);
+        if (activeDevice) return activeDevice.name;
+        let displayName = 'Desktop';
+        if (width <= 768) return displayName = 'Mobile';
+        if (width <= 1024) return displayName = 'Tablet';
+        return displayName;
+    };
+    const onResizePreviewScreen = useCallback((e)=>{
+        const detail = e.detail;
+        if (!detail) return;
+        updateDeviceState({
+            width: detail.width,
+            name: getDisplayName(detail.width),
+            activeId: null
+        });
+    }, [
+        updateDeviceState
+    ]);
+    useEffect(()=>{
+        window.addEventListener('mousedown', onClickOutside);
+        window.addEventListener('editor:resize-preview-screen', onResizePreviewScreen);
+        return ()=>{
+            window.removeEventListener('mousedown', onClickOutside);
+            window.removeEventListener('editor:resize-preview-screen', onResizePreviewScreen);
+        };
+    }, [
+        onResizePreviewScreen
+    ]);
+    const isActiveDevice = (device)=>{
+        return device.id === deviceState.activeId || deviceState.name === device.name;
+    };
+    const handleToggleDropdown = ()=>setIsOpen(!isOpen);
+    if (isShowSwitchView) return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs("div", {
+            ref: switchViewRef,
+            className: `gp-switch-view gp-font-sans gp-flex gp-h-[40px] gp-absolute gp-top-[2px] gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-gap-2 gp-items-center gp-justify-center gp-cursor-pointer ${isOpen ? 'gp-z-50' : 'gp-z-1'}`,
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: `gp-flex gp-gap-1 gp-py-1 gp-px-2 gp-transform -gp-translate-y-[2px] gp-border-[1px] gp-justify-between gp-items-center gp-min-w-[194px] gp-bg-[#F4F4F4] hover:gp-bg-[#E2E2E2] gp-rounded-md gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121] ${isOpen ? 'gp-border-[#3C67FF]' : 'gp-border-transparent'}`,
+                    onClick: (e)=>{
+                        e.preventDefault();
+                        handleToggleDropdown();
+                    },
+                    role: "presentation",
+                    children: [
+                        /*#__PURE__*/ jsxs("span", {
+                            children: [
+                                deviceState.name,
+                                " (",
+                                deviceState.width,
+                                "px)"
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: /*#__PURE__*/ jsx("svg", {
+                                width: "9",
+                                height: "5",
+                                viewBox: "0 0 9 5",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: /*#__PURE__*/ jsx("path", {
+                                    fillRule: "evenodd",
+                                    clipRule: "evenodd",
+                                    d: "M1.07564 0.775834C1.30995 0.541519 1.68985 0.541519 1.92417 0.775834L4.6999 3.55157L7.47564 0.775834C7.70995 0.541519 8.08985 0.541519 8.32417 0.775834C8.55848 1.01015 8.55848 1.39005 8.32417 1.62436L5.12417 4.82436C4.88985 5.05868 4.50995 5.05868 4.27564 4.82436L1.07564 1.62436C0.841324 1.39005 0.841324 1.01015 1.07564 0.775834Z",
+                                    fill: "#212121"
+                                })
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: `gp-absolute gp-top-9 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-bg-[#212121] gp-rounded-xl gp-p-2 gp-text-[#F9F9F9] gp-w-[176px] gp-z-50 ${!isOpen ? 'gp-hidden' : ''}`,
+                    children: devices.map((device)=>/*#__PURE__*/ jsx("div", {
+                            className: "gp-p-2 hover:gp-bg-[#3E3E3E] gp-rounded-md",
+                            onClick: (e)=>{
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onHandleClick(device.id);
+                            },
+                            role: "presentation",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: 'gp-flex gp-gap-2 gp-w-full gp-text-left gp-justify-space-between gp-cursor-pointer gp-leading-5 gp-text-xs gp-font-regular gp-text-[#212121]"',
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "gp-min-w-[16px]",
+                                        children: isActiveDevice(device) && /*#__PURE__*/ jsx("svg", {
+                                            width: "16",
+                                            height: "17",
+                                            viewBox: "0 0 16 17",
+                                            fill: "none",
+                                            xmlns: "http://www.w3.org/2000/svg",
+                                            children: /*#__PURE__*/ jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M12.6348 4.89265C12.792 5.07861 12.7878 5.37537 12.6255 5.55547L6.71176 12.118C6.55312 12.294 6.30118 12.294 6.14255 12.118L3.87448 9.60098C3.71219 9.42088 3.70805 9.12412 3.86523 8.93815C4.02241 8.75219 4.2814 8.74744 4.4437 8.92755L6.42716 11.1287L12.0563 4.88203C12.2186 4.70192 12.4776 4.70668 12.6348 4.89265Z",
+                                                fill: "#00C853"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: device.name
+                                    })
+                                ]
+                            })
+                        }, device.id))
+                })
+            ]
+        })
+    });
+};
+
+export { Devices as default };

package/dist/esm/components/builder/Toolbar.js

@@ -81,7 +81,7 @@ const Toolbar = ()=>{
             }
         }
     };
-    const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
+    const setHoverComponent = useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
         if (!$component && !componentUid) return;
         if (!$component) {
             const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -98,7 +98,7 @@ const Toolbar = ()=>{
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
         const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
         const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
-        if (isThemeSection && $themeSectionStatus) {
+        if (isPreventSection && $themeSectionStatus) {
             $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
         }
         if ($toolbar) {
@@ -120,7 +120,7 @@ const Toolbar = ()=>{
             if (isParent) {
                 $outline.setAttribute('data-outline-parent-hover', 'true');
             }
-            if (isThemeSection) {
+            if (isPreventSection) {
                 $outline.setAttribute('data-outline-overlay-theme-section', 'true');
             }
             if (focus) {
@@ -375,25 +375,25 @@ const Toolbar = ()=>{
         countShowOnboarding,
         onCloseOnboarding
     ]);
-    const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
-        if (!componentUid) return;
-        let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`, timeAwait);
-        // check element fetch data: product, product list
-        if (!$component) {
-            const isLoading = document.querySelector(`.gp-loading-placeholder`);
-            if (!isLoading) {
-                return;
-            }
-            if (isLoading) {
-                // await element onload
-                $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
-            }
+    const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
+        if (marqueeKey) {
+            return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
         }
-        if (!$component) {
-            return;
+        return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
+    };
+    const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
+        if (!componentUid) return;
+        const selector = getSelectorComponent({
+            componentUid,
+            productId,
+            marqueeKey
+        });
+        const $component = await waitForElementToExist(selector, timeAwait);
+        if (!$component) return;
+        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
+        if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
+            removeActiveComponent();
         }
-        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
-        if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
         const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
         const $outline = getChildrenByAttrSelector($component, 'data-outline');
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -401,7 +401,8 @@ const Toolbar = ()=>{
         if ($toolbar) {
             currentComponentActive.current = {
                 componentUid,
-                productId
+                productId,
+                marqueeKey
             };
             $toolbar.removeAttribute('style');
             $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -420,8 +421,9 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
         }
+        const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
         // Active same element in product list
-        if (productId) {
+        if (productId || isChildOfMarquee) {
             const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
             if ($relatedElements?.length) {
                 $relatedElements.forEach(($relatedElement)=>{
@@ -628,23 +630,23 @@ const Toolbar = ()=>{
                     }
                 }
             }
-            const $themeSection = $target.closest('[data-theme-section]');
-            if ($themeSection) {
+            const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
+            if ($preventSection) {
                 setHoverComponent({
-                    $component: $themeSection,
+                    $component: $preventSection,
                     focus: true,
-                    isThemeSection: true
+                    isPreventSection: true
                 });
             } else {
                 return;
             }
         }
-        const $themeSection = $target.closest('[data-theme-section]');
-        if ($themeSection) {
+        const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
+        if ($preventSection) {
             setHoverComponent({
-                $component: $themeSection,
+                $component: $preventSection,
                 focus: true,
-                isThemeSection: true
+                isPreventSection: true
             });
         } else {
             setHoverComponent({
@@ -671,7 +673,8 @@ const Toolbar = ()=>{
         if (detail?.componentUid) {
             setActiveComponent({
                 componentUid: detail.componentUid,
-                productId: detail.productId
+                productId: detail.productId,
+                marqueeKey: detail.marqueeKey
             });
         } else {
             removeActiveComponent();

package/dist/esm/components/builder/const.js

@@ -0,0 +1,54 @@
+const devices = [
+    {
+        id: 'iphone-13-mini',
+        name: 'iPhone 13 Mini',
+        width: 375
+    },
+    {
+        id: 'iphone-13-pro',
+        name: 'iPhone 13 Pro',
+        width: 390
+    },
+    {
+        id: 'iphone-11-pro-max',
+        name: 'iPhone 11 Pro Max',
+        width: 414
+    },
+    {
+        id: 'iphone-15-pro-max',
+        name: 'iPhone 15 Pro Max',
+        width: 430
+    },
+    {
+        id: 'pixel-7',
+        name: 'Pixel 7',
+        width: 412
+    },
+    {
+        id: 'galaxy-s8-plus',
+        name: 'Galaxy S8+',
+        width: 360
+    },
+    {
+        id: 'galaxy-s20-ultra',
+        name: 'Galaxy S20 Ultra',
+        width: 412
+    },
+    {
+        id: 'ipad-mini',
+        name: 'iPad Mini',
+        width: 768
+    },
+    {
+        id: 'ipad-air',
+        name: 'iPad Air',
+        width: 820
+    },
+    {
+        id: 'ipad-pro',
+        name: 'iPad Pro',
+        width: 1024
+    }
+];
+
+export { devices };