@gem-sdk/core 1.24.4 → 1.25.0

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -0,0 +1,443 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('zustand');
+var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
+var ShopContext = require('../contexts/ShopContext.js');
+require('@gem-sdk/adapter-shopify');
+require('swr');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../hooks/useCartUI.js');
+var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
+var Tooltip = require('./toolbar/Tooltip.js');
+var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
+var Resize = require('./resize/Resize.js');
+require('../helpers/convert.js');
+
+const SECTION_LIMIT = 25;
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < 32 + 1;
+};
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection(thisEl)) return;
+    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
+const ComponentToolbarPreview = ({ ...props })=>{
+    const isThemeSection = props.isThemeSection;
+    const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
+    const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
+    const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
+    const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const [activeAddSection, setActiveAddSection] = react.useState(null);
+    const [isShowParent, setIsShowParent] = react.useState(false);
+    const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
+    const [parents, setParents] = react.useState([]);
+    // Get parents
+    const onActiveComponent = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.componentUid == props.uid) {
+            const currentParents = getParents(props.uid).filter((parent)=>{
+                if (parent.uid === 'ROOT') return false;
+                if (parent.tag === 'Section') return false;
+                if (parent.editorConfigs?.toolbar?.hide) return false;
+                if (parent.editorConfigs?.component?.noSetting) return false;
+                return true;
+            }).slice(0, 3);
+            setParents(currentParents);
+        } else {
+            setParents([]);
+            setIsShowParent(false);
+        }
+    }, [
+        setParents,
+        getParents,
+        props.uid
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('editor:active-component', onActiveComponent);
+        return ()=>{
+            window.removeEventListener('editor:active-component', onActiveComponent);
+        };
+    }, [
+        onActiveComponent
+    ]);
+    // End get parents
+    if (props.type === 'section') {
+        return null;
+    }
+    if (props.editorConfigs?.toolbar?.hide) {
+        return null;
+    }
+    const getSectionNumber = ()=>{
+        return root?.childrens?.length || 0;
+    };
+    const getIndexSection = ()=>{
+        if (props.tag !== 'Section') {
+            return -1;
+        }
+        if (root?.childrens?.length) {
+            return root.childrens.findIndex((sectionUid)=>sectionUid == props.uid);
+        }
+        return -1;
+    };
+    const onShowParent = (e)=>{
+        if (!parents.length) return;
+        const $target = (e?.target) || null;
+        const $toolbar = $target.closest('[data-toolbar-active]');
+        if (!$target || !$toolbar) return;
+        if (isShowParent) {
+            setIsShowParentRevert(false);
+            setIsShowParent(false);
+        } else {
+            const $parentOverflow = findOverflowParent($toolbar, $toolbar);
+            if ($parentOverflow) {
+                setIsShowParentRevert(true);
+            } else {
+                const rect = $toolbar.getBoundingClientRect();
+                if (rect.top < parents.length * 24) {
+                    setIsShowParentRevert(true);
+                } else {
+                    setIsShowParentRevert(false);
+                }
+            }
+            setIsShowParent(true);
+        }
+        const event = new CustomEvent('editor:toolbar:show-parents', {
+            bubbles: true,
+            detail: {
+                value: !isShowParent
+            }
+        });
+        window.dispatchEvent(event);
+    };
+    const onDelete = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        const event = new CustomEvent('editor:toolbar:delete-component', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid,
+                isThemeSection: isThemeSection
+            }
+        });
+        window.dispatchEvent(event);
+        return false;
+    };
+    const onDuplicate = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
+            return false;
+        }
+        const event = new CustomEvent('editor:toolbar:duplicate-component', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid,
+                isThemeSection: isThemeSection
+            }
+        });
+        window.dispatchEvent(event);
+        return false;
+    };
+    const onZoomOut = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        const event = new CustomEvent('editor:toolbar:zoom-out-component', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid
+            }
+        });
+        window.dispatchEvent(event);
+        return false;
+    };
+    const closeAddSection = ()=>{
+        setActiveAddSection(null);
+        window.removeEventListener('editor:close-add-section-popup', closeAddSection);
+    };
+    const onAddSection = (e, position)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (getSectionNumber() >= SECTION_LIMIT) {
+            return false;
+        }
+        const $target = e.target;
+        if ($target) {
+            setActiveAddSection(position);
+            const rect = $target.getBoundingClientRect();
+            const event = new CustomEvent('editor:toolbar:add-section', {
+                bubbles: true,
+                detail: {
+                    componentUid: props.uid,
+                    position,
+                    top: rect.top + rect.height / 2
+                }
+            });
+            window.dispatchEvent(event);
+            window.addEventListener('editor:close-add-section-popup', closeAddSection);
+        }
+        return false;
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                "data-toolbar": true,
+                "data-toolbar-section": props.tag == 'Section',
+                "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        "data-toolbar-show-parent": true,
+                        onClick: (e)=>onShowParent(e),
+                        "aria-hidden": "true",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-icon-drag": true,
+                                children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
+                                            fill: "currentColor"
+                                        })
+                                    ]
+                                })
+                            }),
+                            props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-name": true,
+                                children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
+                            }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-name": true,
+                                children: props.customLabel || props.label
+                            }),
+                            props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-icon-parent": true,
+                                "data-toolbar-icon-parent-open": isShowParent,
+                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        d: "M5.65522 10C5.07265 10 4.7809 9.22865 5.19284 8.77753L7.53762 6.20974C7.79298 5.93009 8.20702 5.93009 8.46238 6.20974L10.8072 8.77754C11.2191 9.22866 10.9274 10 10.3448 10H5.65522Z",
+                                        fill: "currentColor"
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            "data-toolbar-parent": true,
+                            "data-parent-uid": parent.uid,
+                            "data-toolbar-theme-section": isThemeSectionEditor,
+                            style: {
+                                top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
+                            },
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    "data-toolbar-icon-drag": true,
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                        width: "16",
+                                        height: "16",
+                                        viewBox: "0 0 16 16",
+                                        fill: "none",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
+                                                fill: "currentColor"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    "data-toolbar-name": true,
+                                    children: parent.label
+                                })
+                            ]
+                        }, parent.uid)),
+                    props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
+                        ...props
+                    }),
+                    props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        "data-toolbar-zoom-out": true,
+                        onClick: (e)=>onZoomOut(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M14.5 7C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6L10.7072 6L14.8536 1.85355C15.0489 1.65829 15.0489 1.34171 14.8536 1.14645C14.6584 0.951186 14.3418 0.951185 14.1465 1.14645L10 5.29297L10 1.5C10 1.22386 9.77614 1 9.5 1C9.22386 1 9 1.22386 9 1.5L9 6.5C9 6.77614 9.22386 7 9.5 7L14.5 7ZM6 10.7073L6 14.5C6 14.7761 6.22386 15 6.5 15C6.77614 15 7 14.7761 7 14.5L7 9.5C7 9.22386 6.77614 9 6.5 9H1.5C1.22386 9 1 9.22386 1 9.5C1 9.77614 1.22386 10 1.5 10H5.29306L1.14662 14.1464C0.951353 14.3417 0.951353 14.6583 1.14662 14.8536C1.34188 15.0488 1.65846 15.0488 1.85372 14.8536L6 10.7073Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
+                        enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
+                        text: "Page has reached Shopify’s 25 section-limit",
+                        position: "bottom",
+                        "data-toolbar-duplicate": true,
+                        "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
+                        onClick: (e)=>onDuplicate(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M6.08423 1.21289C5.53194 1.21289 5.08423 1.66061 5.08423 2.21289V3.78711H4.26172C3.43329 3.78711 2.76172 4.45868 2.76172 5.28711V13.2871C2.76172 14.1155 3.43329 14.7871 4.26172 14.7871H10.2617C11.0901 14.7871 11.7617 14.1155 11.7617 13.2871V12.4629H13.0842C13.6365 12.4629 14.0842 12.0152 14.0842 11.4629V2.21289C14.0842 1.66061 13.6365 1.21289 13.0842 1.21289H6.08423ZM10.7617 12.4629H6.08423C5.53194 12.4629 5.08423 12.0152 5.08423 11.4629V4.78711H4.26172C3.98558 4.78711 3.76172 5.01097 3.76172 5.28711V13.2871C3.76172 13.5633 3.98558 13.7871 4.26172 13.7871H10.2617C10.5379 13.7871 10.7617 13.5633 10.7617 13.2871V12.4629Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        "data-toolbar-delete": true,
+                        onClick: (e)=>onDelete(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M11 2.88965V2.38965C11 1.56122 10.3284 0.889648 9.5 0.889648H6.5C5.67157 0.889648 5 1.56122 5 2.38965V2.88965H2C1.72386 2.88965 1.5 3.11351 1.5 3.38965C1.5 3.66579 1.72386 3.88965 2 3.88965H3.21997V13.1099C3.21997 14.2144 4.1154 15.1099 5.21997 15.1099H11.22C12.3245 15.1099 13.22 14.2144 13.22 13.1099V3.88965H14C14.2761 3.88965 14.5 3.66579 14.5 3.38965C14.5 3.11351 14.2761 2.88965 14 2.88965H11ZM6 2.88965H10V2.38965C10 2.11351 9.77614 1.88965 9.5 1.88965H6.5C6.22386 1.88965 6 2.11351 6 2.38965V2.88965ZM6.24976 6.13965C6.66397 6.13965 6.99976 6.47543 6.99976 6.88965V11.3896C6.99976 11.8039 6.66397 12.1396 6.24976 12.1396C5.83554 12.1396 5.49976 11.8039 5.49976 11.3896V6.88965C5.49976 6.47543 5.83554 6.13965 6.24976 6.13965ZM10.4998 6.88965C10.4998 6.47543 10.164 6.13965 9.74976 6.13965C9.33554 6.13965 8.99976 6.47543 8.99976 6.88965V11.3896C8.99976 11.8039 9.33554 12.1396 9.74976 12.1396C10.164 12.1396 10.4998 11.8039 10.4998 11.3896V6.88965Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    })
+                ]
+            }),
+            editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
+                ...props
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                "data-outline": true,
+                "data-outline-section": props.tag == 'Section',
+                "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-outline-limit": getIndexSection() >= SECTION_LIMIT
+            }),
+            props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
+                        enable: getSectionNumber() >= SECTION_LIMIT,
+                        text: "Page has reached Shopify’s 25 section-limit",
+                        position: "top",
+                        "data-toolbar-add-top": true,
+                        "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
+                        "data-toolbar-add-open": activeAddSection == 'above',
+                        onClick: (e)=>onAddSection(e, 'above'),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
+                        enable: getSectionNumber() >= SECTION_LIMIT,
+                        text: "Page has reached Shopify’s 25 section-limit",
+                        position: "top",
+                        "data-toolbar-add-bottom": true,
+                        "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
+                        "data-toolbar-add-open": activeAddSection == 'below',
+                        onClick: (e)=>onAddSection(e, 'below'),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
+                ...props
+            })
+        ]
+    });
+};
+
+exports.ComponentToolbarPreview = ComponentToolbarPreview;

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -7,12 +7,27 @@ var react = require('react');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
+var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
+    react.useEffect(()=>{
+        const event = new CustomEvent('editor:component:render', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid
+            }
+        });
+        window.dispatchEvent(event);
+    }, [
+        props.uid
+    ]);
     if (props.type === 'section') {
         return null;
     }
     const customProps = {};
+    if (props.tag === 'Section' && props.isThemeSection) {
+        customProps['data-theme-section'] = true;
+    }
     // Build editor configs
     if (props.editorConfigs) {
         const editorConfigs = props.editorConfigs;
@@ -43,6 +58,13 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         if (editorConfigs.slots?.children) {
             customProps['data-slots-children'] = true;
         }
+        if (!editorConfigs.toolbar?.hide) {
+            customProps['data-toolbar-wrap'] = true;
+        }
+    }
+    // Show toolbar wrapper
+    if (!props?.editorConfigs?.toolbar?.hide) {
+        customProps['data-toolbar-wrap'] = true;
     }
     const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
     const advanced = props.advanced;
@@ -60,12 +82,18 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     uid: props.uid,
                     advanced: advanced
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                /*#__PURE__*/ jsxRuntime.jsxs(children.type, {
                     className: advanced?.cssClass,
                     ...children.props,
                     style,
                     builderAttrs,
-                    advanced
+                    advanced,
+                    children: [
+                        children.props['children'],
+                        /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                            ...props
+                        })
+                    ]
                 })
             ]
         });
@@ -77,11 +105,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 uid: props.uid,
                 advanced: advanced
             }),
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 style: style,
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
-                children: children
+                children: [
+                    children,
+                    /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                        ...props
+                    })
+                ]
             })
         ]
     });

package/dist/cjs/components/Render.liquid.js

@@ -3,7 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
+require('react/jsx-runtime');
+require('zustand');
 require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
 var render = require('../helpers/render.js');
 require('../helpers/convert.js');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');

package/dist/cjs/components/RenderCustomCode.js

@@ -13,6 +13,8 @@ require('swr/mutation');
 var shop = require('../hooks/shop.js');
 require('vanilla-lazyload');
 require('../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
 require('../helpers/convert.js');
 
 const RenderCustomCode = ({ uid, advanced })=>{

package/dist/cjs/components/resize/Resize.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Spacing = require('./Spacing.js');
+
+function Resize(props) {
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
+            ...props
+        })
+    });
+}
+
+exports.default = Resize;