@gem-sdk/core 1.0.0

package/dist/cjs/hooks/usePrevious.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('react');
+
+const usePrevious = (value) => {
+    // The ref object is a generic container whose current property is mutable ...
+    // ... and can hold any value, similar to an instance property on a class
+    const ref = react.useRef();
+    // Store current value in ref
+    react.useEffect(() => {
+        ref.current = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref.current;
+};
+
+exports.usePrevious = usePrevious;

package/dist/cjs/hooks/useProduct.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var react = require('react');
+var ProductContext = require('../contexts/ProductContext.js');
+var flattenConnection = require('../helpers/flatten-connection.js');
+require('swr');
+var product = require('../helpers/product.js');
+
+const useUniqProductID = () => {
+    return ProductContext.useProductStore((s) => s.uiqueId);
+};
+const useProduct = () => {
+    return ProductContext.useProductStore((s) => s.product);
+};
+const useFeaturedImageGlobal = () => {
+    return ProductContext.useProductStore((s) => s.featuredImageGlobal);
+};
+const useProductProperties = () => {
+    return ProductContext.useProductStore((s) => s.properties);
+};
+const useQuantity = () => {
+    const quantity = ProductContext.useProductStore((s) => s.quantity);
+    const decrement = ProductContext.useProductStore((s) => s.decrementQuantity);
+    const increment = ProductContext.useProductStore((s) => s.incrementQuantity);
+    const updateQuantity = ProductContext.useProductStore((s) => s.setQuantity);
+    const reset = react.useCallback(() => {
+        updateQuantity(1);
+    }, [updateQuantity]);
+    return react.useMemo(() => ({ quantity, increment, decrement, reset, setQuantity: updateQuantity }), [decrement, increment, quantity, reset, updateQuantity]);
+};
+const useSelectedOption = () => {
+    const setSelectedOption = ProductContext.useProductStore((s) => s.setSelectedOption);
+    const selectedOptions = ProductContext.useProductStore((s) => s.selectedOptions);
+    const forceSelectedOption = ProductContext.useProductStore((s) => s.forceSelectedOption);
+    const updateOption = react.useCallback((optionId, optionValue) => {
+        setSelectedOption(optionId, optionValue);
+    }, [setSelectedOption]);
+    return react.useMemo(() => ({
+        selectedOptions,
+        setSelectedOption: updateOption,
+        forceSelectedOption,
+    }), [selectedOptions, updateOption, forceSelectedOption]);
+};
+const useVariants = () => {
+    const variants = ProductContext.useProductStore((s) => s.product?.variants);
+    return flattenConnection.flattenConnection(variants);
+};
+const useVariant = (id) => {
+    const variants = useVariants();
+    return react.useMemo(() => variants?.find((v) => v?.id === id), [id, variants]);
+};
+const useCurrentVariant = () => {
+    const { selectedOptions } = useSelectedOption();
+    const variants = useVariants();
+    return react.useMemo(() => product.getSelectedVariant(variants, selectedOptions), [selectedOptions, variants]);
+};
+function checkInStock(variant) {
+    if (!variant)
+        return false;
+    return ((variant?.inventoryQuantity && variant.inventoryQuantity > 0) ||
+        !variant?.manageInventory ||
+        variant.inventoryPolicy === 'continue');
+}
+const useCurrentVariantInStock = () => {
+    const currentVariant = useCurrentVariant();
+    const isInStock = checkInStock(currentVariant);
+    return isInStock;
+};
+const useVariantOutStock = (optionId, optionValue) => {
+    const { selectedOptions } = useSelectedOption();
+    const variants = useVariants();
+    const matchedVariant = product.getSelectedVariant(variants, {
+        ...selectedOptions,
+        [optionId]: optionValue,
+    });
+    const isInStock = checkInStock(matchedVariant);
+    return !isInStock;
+};
+
+exports.useCurrentVariant = useCurrentVariant;
+exports.useCurrentVariantInStock = useCurrentVariantInStock;
+exports.useFeaturedImageGlobal = useFeaturedImageGlobal;
+exports.useProduct = useProduct;
+exports.useProductProperties = useProductProperties;
+exports.useQuantity = useQuantity;
+exports.useSelectedOption = useSelectedOption;
+exports.useUniqProductID = useUniqProductID;
+exports.useVariant = useVariant;
+exports.useVariantOutStock = useVariantOutStock;
+exports.useVariants = useVariants;

package/dist/cjs/hooks/useProductList.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var ProductListContext = require('../contexts/ProductListContext.js');
+
+const useProductList = () => {
+    return ProductListContext.useProductListStore((s) => s.collection);
+};
+const useProductListProducts = () => {
+    return ProductListContext.useProductListStore((s) => s.products);
+};
+const useProductListSettings = () => {
+    return ProductListContext.useProductListStore((s) => s.settings);
+};
+const useProductListStyles = () => {
+    return ProductListContext.useProductListStore((s) => s.styles);
+};
+
+exports.useProductList = useProductList;
+exports.useProductListProducts = useProductListProducts;
+exports.useProductListSettings = useProductListSettings;
+exports.useProductListStyles = useProductListStyles;

package/dist/cjs/hooks/useSuspenseFetch.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const cache = new Map();
+const useSuspenseFetch = (key, promise) => {
+    const value = cache.get(key) || { status: 'new', data: null };
+    if (value.status === 'resolved') {
+        return { data: value.data };
+    }
+    promise()
+        .then((data) => {
+        value.status = 'resolved';
+        value.data = data;
+        cache.set(key, value);
+    })
+        .catch(() => {
+        value.status = 'error';
+        value.data = null;
+    });
+    throw promise();
+};
+
+exports.default = useSuspenseFetch;

package/dist/cjs/hooks/useSwatchesOptions.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shop = require('./shop.js');
+
+const initialSwatchOptionValue = {
+    label: '',
+    colors: [],
+    imageUrl: '',
+};
+const initialGlobalSwatchesData = {
+    optionTitle: '',
+    optionType: '',
+    optionValues: [],
+};
+const useSwatchesOptions = (options) => {
+    const { swatches } = shop.useSwatches();
+    if (!options)
+        return [];
+    return options?.map((option) => {
+        const swatchOption = swatches?.find((sw) => sw?.optionTitle === option?.name) || { ...initialGlobalSwatchesData };
+        return {
+            ...option,
+            optionType: swatchOption ? swatchOption.optionType : '',
+            values: option.values?.map((val) => {
+                const swatchValue = (swatchOption &&
+                    swatchOption?.optionValues?.find((swatOp) => swatOp?.label === val?.label)) || { ...initialSwatchOptionValue };
+                return {
+                    ...val,
+                    colors: swatchValue?.colors || [],
+                    imageUrl: swatchValue?.imageUrl || '',
+                };
+            }),
+        };
+    });
+};
+
+exports.default = useSwatchesOptions;

package/dist/cjs/index.js

@@ -0,0 +1,229 @@
+'use strict';
+
+var AddOn = require('./components/AddOn.js');
+var Render = require('./components/Render.js');
+var RenderPreview = require('./components/RenderPreview.js');
+var AddonContext = require('./contexts/AddonContext.js');
+var BuilderComponent = require('./contexts/BuilderComponent.js');
+var BuilderContext = require('./contexts/BuilderContext.js');
+var BuilderPreviewContext = require('./contexts/BuilderPreviewContext.js');
+var CartLineContext = require('./contexts/CartLineContext.js');
+var ProductListContext = require('./contexts/ProductListContext.js');
+var ProductContext = require('./contexts/ProductContext.js');
+var SectionContext = require('./contexts/SectionContext.js');
+var ShopContext = require('./contexts/ShopContext.js');
+var CollectionContext = require('./contexts/CollectionContext.js');
+var collectionDetailFilter_generated = require('./graphql/queries/collection-detail-filter.generated.js');
+var collection_generated = require('./graphql/queries/collection.generated.js');
+var publishedThemePages_generated = require('./graphql/queries/published-theme-pages.generated.js');
+var products_generated = require('./graphql/queries/products.generated.js');
+var storeProperty_generated = require('./graphql/queries/storeProperty.generated.js');
+var previewPage_generated = require('./graphql/queries/preview-page.generated.js');
+var borders = require('./helpers/borders.js');
+var cls = require('./helpers/cls.js');
+var flattenConnection = require('./helpers/flatten-connection.js');
+var getResonsiveValue = require('./helpers/get-resonsive-value.js');
+var getShortname = require('./helpers/get-shortname.js');
+var GlobalEvent = require('./helpers/GlobalEvent.js');
+var isBrowser = require('./helpers/is-browser.js');
+var isEmptyChildren = require('./helpers/is-empty-children.js');
+var makeStyle = require('./helpers/make-style.js');
+var normalizeBuilderData = require('./helpers/normalize-builder-data.js');
+var prefetchQueries = require('./helpers/prefetch-queries.js');
+var shadow = require('./helpers/shadow.js');
+var size = require('./helpers/size.js');
+var spacing = require('./helpers/spacing.js');
+var loadScript = require('./helpers/load-script.js');
+var email = require('./helpers/email.js');
+var layout = require('./helpers/layout.js');
+var background = require('./helpers/background.js');
+var cssVariable = require('./helpers/css-variable.js');
+var isDefined = require('./helpers/is-defined.js');
+var colors = require('./helpers/colors.js');
+var typography = require('./helpers/typography.js');
+var radius = require('./helpers/radius.js');
+var product = require('./helpers/product.js');
+var fpixel = require('./helpers/fpixel.js');
+var gtag = require('./helpers/gtag.js');
+var tiktokpixel = require('./helpers/tiktokpixel.js');
+var useAddToCart = require('./hooks/cart/use-add-to-cart.js');
+var useCartData = require('./hooks/cart/use-cart-data.js');
+var useCartDiscountCodesUpdate = require('./hooks/cart/use-cart-discount-codes-update.js');
+var useCartNoteUpdate = require('./hooks/cart/use-cart-note-update.js');
+var useCreateCart = require('./hooks/cart/use-create-cart.js');
+var useRemoveCartItem = require('./hooks/cart/use-remove-cart-item.js');
+var useUpdateCartItem = require('./hooks/cart/use-update-cart-item.js');
+var shop = require('./hooks/shop.js');
+var useCollectionQuery = require('./hooks/shop/use-collection-query.js');
+var useProductQuery = require('./hooks/shop/use-product-query.js');
+var useProductsQuery = require('./hooks/shop/use-products-query.js');
+var useCurrentDevice = require('./hooks/use-current-device.js');
+var useLazyVideo = require('./hooks/use-lazy-video.js');
+var useCartId = require('./hooks/useCartId.js');
+var useCartLine = require('./hooks/useCartLine.js');
+var useCartUI = require('./hooks/useCartUI.js');
+var useCollection = require('./hooks/useCollection.js');
+var useFormatMoney = require('./hooks/useFormatMoney.js');
+var react = require('react');
+var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect.js');
+var useLoadScript = require('./hooks/useLoadScript.js');
+var useMoney = require('./hooks/useMoney.js');
+var usePrevious = require('./hooks/usePrevious.js');
+var useProduct = require('./hooks/useProduct.js');
+var useProductList = require('./hooks/useProductList.js');
+var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
+var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
+var shop$1 = require('./types/shop.js');
+var globalStyle = require('./types/global-style.js');
+var getCollection = require('./helpers/queries/get-collection.js');
+var getProduct = require('./helpers/queries/get-product.js');
+var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
+
+
+
+exports.AddOn = AddOn.default;
+exports.Render = Render.default;
+exports.RenderPreview = RenderPreview.default;
+exports.AddonProvider = AddonContext.AddonProvider;
+exports.useAddon = AddonContext.useAddon;
+exports.useAddons = AddonContext.useAddons;
+exports.BuilderComponentProvider = BuilderComponent.BuilderComponentProvider;
+exports.useBuilderComponent = BuilderComponent.useBuilderComponent;
+exports.BuilderProvider = BuilderContext.BuilderProvider;
+exports.useBuilderStore = BuilderContext.useBuilderStore;
+exports.BuilderPreviewProvider = BuilderPreviewContext.BuilderPreviewProvider;
+exports.useBuilderPreviewStore = BuilderPreviewContext.useBuilderPreviewStore;
+exports.CartLineProvider = CartLineContext.CartLineProvider;
+exports.useCartLineStore = CartLineContext.useCartLineStore;
+exports.ProductListProvider = ProductListContext.ProductListProvider;
+exports.useProductListStore = ProductListContext.useProductListStore;
+exports.ProductProvider = ProductContext.ProductProvider;
+exports.useProductStore = ProductContext.useProductStore;
+exports.SectionProvider = SectionContext.SectionProvider;
+exports.useSection = SectionContext.useSection;
+exports.useSectionStore = SectionContext.useSectionStore;
+exports.ShopProvider = ShopContext.ShopProvider;
+exports.useShopStore = ShopContext.useShopStore;
+exports.CollectionProvider = CollectionContext.CollectionProvider;
+exports.useCollectionStore = CollectionContext.useCollectionStore;
+exports.CollectionDetailFilterDocument = collectionDetailFilter_generated.CollectionDetailFilterDocument;
+exports.CollectionDocument = collection_generated.CollectionDocument;
+exports.PublishedThemePagesDocument = publishedThemePages_generated.PublishedThemePagesDocument;
+exports.ProductsDocument = products_generated.ProductsDocument;
+exports.StorePropertyDocument = storeProperty_generated.StorePropertyDocument;
+exports.PreviewPageDocument = previewPage_generated.PreviewPageDocument;
+exports.handleConvertBorderColor = borders.handleConvertBorderColor;
+exports.handleConvertBorderStyle = borders.handleConvertBorderStyle;
+exports.handleConvertBorderWidth = borders.handleConvertBorderWidth;
+exports.handleConvertClassColor = borders.handleConvertClassColor;
+exports.cls = cls.cls;
+exports.flattenConnection = flattenConnection.flattenConnection;
+exports.getResponsiveStateValue = getResonsiveValue.getResponsiveStateValue;
+exports.getResponsiveValue = getResonsiveValue.getResponsiveValue;
+exports.getResponsiveValueByScreen = getResonsiveValue.getResponsiveValueByScreen;
+exports.getShortName = getShortname.getShortName;
+exports.globalEvent = GlobalEvent.default;
+exports.isBrowser = isBrowser.default;
+exports.isEmptyChildren = isEmptyChildren.isEmptyChildren;
+exports.makeAspectRatio = makeStyle.makeAspectRatio;
+exports.makeHeight = makeStyle.makeHeight;
+exports.makeStyle = makeStyle.makeStyle;
+exports.makeStyleResponsive = makeStyle.makeStyleResponsive;
+exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
+exports.makeStyleState = makeStyle.makeStyleState;
+exports.makeWidth = makeStyle.makeWidth;
+exports.normalizeBuilderData = normalizeBuilderData.normalizeBuilderData;
+exports.prefetchQueries = prefetchQueries.prefetchQueries;
+exports.getStyleShadow = shadow.getStyleShadow;
+exports.getStyleShadowState = shadow.getStyleShadowState;
+exports.composeSize = size.composeSize;
+exports.composeSpacing = spacing.composeSpacing;
+exports.getSpacingVariable = spacing.getSpacingVariable;
+exports.loadScript = loadScript.loadScript;
+exports.validateEmail = email.validateEmail;
+exports.optionLayoutStyle = layout.optionLayoutStyle;
+exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
+exports.genVariable = cssVariable.genVariable;
+exports.isDefined = isDefined.isDefined;
+exports.getGlobalColorCSSProp = colors.getGlobalColorCSSProp;
+exports.getGlobalColorClass = colors.getGlobalColorClass;
+exports.getGlobalColorResponsiveClass = colors.getGlobalColorResponsiveClass;
+exports.getGlobalColorResponsiveStyle = colors.getGlobalColorResponsiveStyle;
+exports.getGlobalColorStateClass = colors.getGlobalColorStateClass;
+exports.getGlobalColorStateResponsiveClass = colors.getGlobalColorStateResponsiveClass;
+exports.getGlobalColorStateResponsiveStyle = colors.getGlobalColorStateResponsiveStyle;
+exports.getGlobalColorStateStyle = colors.getGlobalColorStateStyle;
+exports.getGlobalColorStyle = colors.getGlobalColorStyle;
+exports.getSingleColorVariable = colors.getSingleColorVariable;
+exports.isColor = colors.isColor;
+exports.genTypoClass = typography.genTypoClass;
+exports.composeRadius = radius.composeRadius;
+exports.getCustomRadius = radius.getCustomRadius;
+exports.getRadiusCSSFromGlobal = radius.getRadiusCSSFromGlobal;
+exports.getRadiusStyleActiveState = radius.getRadiusStyleActiveState;
+exports.getSelectedVariant = product.getSelectedVariant;
+exports.parseSelectedOption = product.parseSelectedOption;
+exports.fpixel = fpixel;
+exports.gtag = gtag;
+exports.tiktokpixel = tiktokpixel;
+exports.useAddToCart = useAddToCart.useAddToCart;
+exports.useCartData = useCartData.useCartData;
+exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate.useCartDiscountCodesUpdate;
+exports.useCartNoteUpdate = useCartNoteUpdate.useCartNoteUpdate;
+exports.useCreateCart = useCreateCart.useCreateCart;
+exports.useRemoveCartItem = useRemoveCartItem.useRemoveCartItem;
+exports.useUpdateCartItem = useUpdateCartItem.useUpdateCartItem;
+exports.useConnectedShopify = shop.useConnectedShopify;
+exports.useCurrency = shop.useCurrency;
+exports.useEditorMode = shop.useEditorMode;
+exports.useIsSampleProduct = shop.useIsSampleProduct;
+exports.useLocale = shop.useLocale;
+exports.useMatchMutate = shop.useMatchMutate;
+exports.useMobileOnly = shop.useMobileOnly;
+exports.usePageType = shop.usePageType;
+exports.usePluginEnable = shop.usePluginEnable;
+exports.useStoreFront = shop.useStoreFront;
+exports.useCollectionQuery = useCollectionQuery.useCollectionQuery;
+exports.useProductQuery = useProductQuery.useProductQuery;
+exports.useProductsQuery = useProductsQuery.useProductsQuery;
+exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
+exports.useLazyVideo = useLazyVideo.useLazyVideo;
+exports.useCartId = useCartId.default;
+exports.useCartLine = useCartLine.default;
+exports.useCartUI = useCartUI.default;
+exports.useCollection = useCollection.useCollection;
+exports.useFormatMoney = useFormatMoney.default;
+Object.defineProperty(exports, 'useId', {
+	enumerable: true,
+	get: function () { return react.useId; }
+});
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.default;
+exports.useLoadScript = useLoadScript.default;
+exports.useMoney = useMoney.default;
+exports.usePrevious = usePrevious.usePrevious;
+exports.useCurrentVariant = useProduct.useCurrentVariant;
+exports.useCurrentVariantInStock = useProduct.useCurrentVariantInStock;
+exports.useFeaturedImageGlobal = useProduct.useFeaturedImageGlobal;
+exports.useProduct = useProduct.useProduct;
+exports.useProductProperties = useProduct.useProductProperties;
+exports.useQuantity = useProduct.useQuantity;
+exports.useSelectedOption = useProduct.useSelectedOption;
+exports.useUniqProductID = useProduct.useUniqProductID;
+exports.useVariant = useProduct.useVariant;
+exports.useVariantOutStock = useProduct.useVariantOutStock;
+exports.useVariants = useProduct.useVariants;
+exports.useProductList = useProductList.useProductList;
+exports.useProductListProducts = useProductList.useProductListProducts;
+exports.useProductListSettings = useProductList.useProductListSettings;
+exports.useProductListStyles = useProductList.useProductListStyles;
+exports.useSuspenseFetch = useSuspenseFetch.default;
+exports.useSwatchesOptions = useSwatchesOptions.default;
+exports.ShopType = shop$1;
+exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
+exports.OptionSpecialStyle = globalStyle.OptionSpecialStyle;
+exports.calculateFirstProduct = getCollection.calculateFirstProduct;
+exports.getCollection = getCollection.getCollection;
+exports.fetchMedias = getProduct.fetchMedias;
+exports.fetchVariants = getProduct.fetchVariants;
+exports.getProduct = getProduct.getProduct;
+exports.getProductBySlug = getProductBySlug.getProductBySlug;

package/dist/cjs/types/global-style.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const OptionNormalStyle = ['radio_buttons', 'dropdown'];
+const OptionSpecialStyle = ['color', 'image', 'rectangle_list'];
+
+exports.OptionNormalStyle = OptionNormalStyle;
+exports.OptionSpecialStyle = OptionSpecialStyle;

package/dist/cjs/types/shop.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/esm/components/AddOn.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { useAddon } from '../contexts/AddonContext.js';
+import { usePluginEnable } from '../hooks/shop.js';
+
+const AddOn = ({ name }) => {
+    const Comp = useAddon(name);
+    const plugins = usePluginEnable();
+    if (!plugins?.includes(name)) {
+        return null;
+    }
+    return jsx(Comp, {});
+};
+
+export { AddOn as default };

package/dist/esm/components/ComponentWrapper.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
+
+const disableWrap = [
+    'Col',
+    'Row',
+    'Section',
+    'Image',
+    'Text',
+    'Button',
+    'ProductButton',
+    'Cart',
+    'Tabs',
+    'TabItem',
+    'Carousel',
+    'CarouselItem',
+    'ShopPayButton',
+    'AccordionItem',
+    'Video',
+    'Header',
+    'HeroBanner',
+    'Icon',
+    'IconList',
+    'HTMLCode',
+    'IconListHoz',
+    'IconListItem',
+    'CSSCode',
+];
+const ComponentWrapper = ({ children, ...props }) => {
+    if (props.type === 'section')
+        return null;
+    const style = composeAdvanceStyle(props.advanced, props.tag);
+    if (disableWrap.includes(props.tag) && isValidElement(children)) {
+        return jsx(children.type, { ...children.props, ...{ style } });
+    }
+    return (jsx("div", { style: style, className: `${props.uid}`, children: children }));
+};
+
+export { ComponentWrapper as default, disableWrap };

package/dist/esm/components/ComponentWrapperPreview.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
+import { disableWrap } from './ComponentWrapper.js';
+
+const ComponentWrapperPreview = ({ children, ...props }) => {
+    if (props.type === 'section') {
+        return null;
+    }
+    const customProps = {};
+    // Build editor configs
+    if (props.editorConfigs) {
+        const editorConfigs = props.editorConfigs;
+        if (editorConfigs.placeholder?.notAppendBeforeAfter) {
+            customProps['data-placeholder-not-append-before-after'] = true;
+        }
+        if (editorConfigs.toolbar?.parent) {
+            customProps['data-toolbar-parent'] = true;
+        }
+        if (editorConfigs.component?.noDelete) {
+            customProps['data-component-no-delete'] = true;
+        }
+        if (editorConfigs.component?.noDuplicate) {
+            customProps['data-component-no-duplicate'] = true;
+        }
+        if (editorConfigs.component?.noDragDrop) {
+            customProps['data-component-no-drag-drop'] = true;
+        }
+        if (editorConfigs.component?.noSetting) {
+            customProps['data-component-no-setting'] = true;
+        }
+        if (editorConfigs.toolbar?.hide) {
+            customProps['data-toolbar-hide'] = true;
+        }
+        if (editorConfigs.slots?.children) {
+            customProps['data-slots-children'] = true;
+        }
+    }
+    const style = composeAdvanceStyle(props.advanced, props.tag);
+    const builderAttrs = {
+        ...customProps,
+        'data-uid': props.uid,
+        'data-component-type': 'component',
+        'data-component-tag': props.tag,
+        'data-component-label': props.label,
+    };
+    if (disableWrap.includes(props.tag) && isValidElement(children)) {
+        return jsx(children.type, { ...children.props, ...{ style, builderAttrs } });
+    }
+    // Render
+    return (jsx("div", { style: style, className: `${props.uid}`, ...builderAttrs, children: children }));
+};
+
+export { ComponentWrapperPreview as default };

package/dist/esm/components/Empty.js

@@ -0,0 +1,3 @@
+const Empty = () => null;
+
+export { Empty as default };

package/dist/esm/components/Render.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useBuilderComponent } from '../contexts/BuilderComponent.js';
+import { useBuilderStore } from '../contexts/BuilderContext.js';
+import ComponentWrapper from './ComponentWrapper.js';
+import RenderSectionMemo from './RenderSection.js';
+
+const Render = ({ uid, ...passProps }) => {
+    const item = useBuilderStore((s) => s.getItem(uid));
+    const Component = useBuilderComponent(item?.tag);
+    if (!item)
+        return null;
+    if (item?.type === 'section') {
+        return jsx(RenderSectionMemo, { sectionId: item.uid });
+    }
+    else {
+        return (jsx(ErrorBoundary, { fallbackRender: ({ error, resetErrorBoundary }) => (jsxs(Fragment, { children: [jsx("span", { "aria-label": "Error message", children: error.message }), jsx("button", { type: "button", onClick: resetErrorBoundary, children: "Try again" })] })), children: jsx(ComponentWrapper, { ...item, children: item?.childrens?.length ? (jsx(Component, { builderProps: { uid, builderData: item }, styles: item.styles, setting: item.settings, ...passProps, children: item.childrens.map((id) => (jsx(RenderMemo, { uid: id }, id))) })) : (jsx(Component, { builderProps: { uid, builderData: item }, styles: item.styles, setting: item.settings, ...passProps })) }) }, item.uid));
+    }
+};
+const RenderMemo = memo(Render);
+RenderMemo.displayName = 'RenderMemo';
+
+export { RenderMemo as default };

package/dist/esm/components/RenderBlock.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useBuilderComponent } from '../contexts/BuilderComponent.js';
+import { useBuilderStore } from '../contexts/BuilderContext.js';
+import ComponentWrapper from './ComponentWrapper.js';
+
+const RenderBlock = ({ uid }) => {
+    const item = useBuilderStore((s) => s.getItem(uid));
+    const Component = useBuilderComponent(item?.tag);
+    if (!item || item.type === 'section')
+        return null;
+    return (jsx(ErrorBoundary, { fallbackRender: ({ error, resetErrorBoundary }) => (jsxs(ComponentWrapper, { ...item, children: [jsx("span", { "aria-label": "Error message", children: error.message }), jsx("button", { type: "button", onClick: resetErrorBoundary, children: "Try again" })] })), children: jsx(ComponentWrapper, { ...item, children: item?.childrens?.length ? (jsx(Component, { builderProps: { uid }, styles: item.styles ?? {}, setting: item.settings ?? {}, children: item?.childrens?.map((id) => (jsx(RenderBlockMemo, { uid: id }, id))) })) : (jsx(Component, { builderProps: { uid }, styles: item.styles ?? {}, setting: item.settings ?? {} })) }) }, item.uid));
+};
+const RenderBlockMemo = memo(RenderBlock);
+
+export { RenderBlockMemo as default };

package/dist/esm/components/RenderPreview.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useBuilderComponent } from '../contexts/BuilderComponent.js';
+import { useBuilderPreviewStore } from '../contexts/BuilderPreviewContext.js';
+import ComponentWrapperPreview from './ComponentWrapperPreview.js';
+import RenderSectionMemo from './RenderSection.js';
+
+const RenderPreview = ({ uid, ...passProps }) => {
+    const item = useBuilderPreviewStore((s) => s.getItem(uid));
+    const Component = useBuilderComponent(item?.tag);
+    if (!item)
+        return null;
+    if (item?.type === 'section') {
+        return jsx(RenderSectionMemo, { sectionId: item.uid });
+    }
+    else {
+        return (jsx(ErrorBoundary, { fallbackRender: ({ error, resetErrorBoundary }) => (jsxs(ComponentWrapperPreview, { ...item, children: [jsx("span", { "aria-label": "Error message", children: error.message }), jsx("button", { type: "button", onClick: resetErrorBoundary, children: "Try again" })] })), children: jsx(ComponentWrapperPreview, { ...item, children: item?.childrens?.length ? (jsx(Component, { builderProps: { uid, builderData: item }, styles: item.styles, setting: item.settings, ...passProps, children: item.childrens.map((id) => (jsx(RenderPreviewMemo, { uid: id }, id))) })) : (jsx(Component, { builderProps: { uid, builderData: item }, styles: item.styles, setting: item.settings, ...passProps })) }) }, item.uid));
+    }
+};
+const RenderPreviewMemo = memo(RenderPreview);
+RenderPreviewMemo.displayName = 'RenderPreviewMemo';
+
+export { RenderPreviewMemo as default };

package/dist/esm/components/RenderSection.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { BuilderProvider } from '../contexts/BuilderContext.js';
+import { useSection } from '../contexts/SectionContext.js';
+import RenderBlockMemo from './RenderBlock.js';
+
+const RenderSection = ({ sectionId }) => {
+    const state = useSection(sectionId);
+    if (!state)
+        return null;
+    return (jsx(BuilderProvider, { state: state, children: jsx(RenderBlockMemo, { uid: sectionId }) }, sectionId));
+};
+const RenderSectionMemo = memo(RenderSection);
+
+export { RenderSectionMemo as default };

package/dist/esm/contexts/AddonContext.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo } from 'react';
+import Empty from '../components/Empty.js';
+
+const AddonContext = createContext(null);
+const AddonProvider = ({ children, components, ...passProps }) => {
+    return (jsx(AddonContext.Provider, { ...passProps, value: { components }, children: children }));
+};
+const useAddons = () => {
+    const context = useContext(AddonContext);
+    if (!context) {
+        throw new Error('useAddons must be used within an AddonProvider');
+    }
+    return useMemo(() => context.components, [context.components]);
+};
+const useAddon = (id) => {
+    const addons = useAddons();
+    return useMemo(() => (id ? addons[id] ?? Empty : Empty), [id, addons]);
+};
+
+export { AddonProvider, useAddon, useAddons };