@gem-sdk/core 1.14.0-next.179 → 1.14.0-next.201

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const ComponentWrapperPreview=({children:e,...t})=>{if("section"===t.type)return null;let o={};if(t.editorConfigs){let e=t.editorConfigs;e.placeholder?.notAppendBeforeAfter&&(o["data-placeholder-not-append-before-after"]=!0),e.toolbar?.parent&&(o["data-toolbar-parent"]=!0),e.component?.noDelete&&(o["data-component-no-delete"]=!0),e.component?.noDuplicate&&(o["data-component-no-duplicate"]=!0),e.component?.noDragDrop&&(o["data-component-no-drag-drop"]=!0),e.component?.noSetting&&(o["data-component-no-setting"]=!0),e.component?.isThirdParty&&(o["data-component-is-third-party"]=!0),e.toolbar?.hide&&(o["data-toolbar-hide"]=!0),e.slots?.children&&(o["data-slots-children"]=!0)}let n=composeAdvanceStyle.composeAdvanceStyle(t.advanced,t.tag),a=t.advanced,r={...o,"data-uid":t.uid,"data-component-type":"component","data-component-tag":t.tag,"data-component-label":t.label};return constant.disableWrap.includes(t.tag)&&react.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,style:n,builderAttrs:r,advanced:a}):jsxRuntime.jsx("div",{style:n,className:`${t.uid}`,...r,children:e})};exports.default=ComponentWrapperPreview;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js"),RenderCustomCode=require("./RenderCustomCode.js");const ComponentWrapperPreview=({children:e,...t})=>{if("section"===t.type)return null;let n={};if(t.editorConfigs){let e=t.editorConfigs;e.placeholder?.notAppendBeforeAfter&&(n["data-placeholder-not-append-before-after"]=!0),e.toolbar?.parent&&(n["data-toolbar-parent"]=!0),e.component?.noDelete&&(n["data-component-no-delete"]=!0),e.component?.noDuplicate&&(n["data-component-no-duplicate"]=!0),e.component?.noDragDrop&&(n["data-component-no-drag-drop"]=!0),e.component?.noSetting&&(n["data-component-no-setting"]=!0),e.component?.isThirdParty&&(n["data-component-is-third-party"]=!0),e.toolbar?.hide&&(n["data-toolbar-hide"]=!0),e.slots?.children&&(n["data-slots-children"]=!0)}let o=composeAdvanceStyle.composeAdvanceStyle(t.advanced,t.tag),a=t.advanced,r={...n,"data-uid":t.uid,"data-component-type":"component","data-component-tag":t.tag,"data-component-label":t.label};return constant.disableWrap.includes(t.tag)&&react.isValidElement(e)?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(RenderCustomCode.default,{props:t}),jsxRuntime.jsx(e.type,{...e.props,style:o,builderAttrs:r,advanced:a})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(RenderCustomCode.default,{props:t}),jsxRuntime.jsx("div",{style:o,className:`${t.uid}`,...r,children:e})]})};exports.default=ComponentWrapperPreview;

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

@@ -1,3 +1,15 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("react"),require("swr");var render=require("../helpers/render.js");require("../helpers/convert.js");var composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],Render=({uid:e,builder:t,components:r,parentId:n,extraFiles:d={},...i})=>{let l=t[e],s=r[l?.tag];if(!s)return console.log("Miss component: ",l),{liquid:"",extraFiles:d};if(!l||l?.type==="section")return{liquid:"",extraFiles:d};{let d={extraFiles:{}},a=composeAdvanceStyle.composeAdvanceStyle(l.advanced,l.tag),o="";return{liquid:o=constant.disableWrap.includes(l.tag)?render.RenderIf(l?.childrens?.length,()=>s({builderProps:{uid:e,builderData:l},styles:l.styles,setting:l.settings,style:a,advanced:l.advanced,parentId:componentsRenderWithParentId.includes(l.tag)?n:null,...i,rawChildren:l.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:d})),children:constant.customRenderChildren.includes(l.tag)?"":WrapRenderChildren({uid:e,customProps:d},l.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:d,parentTag:l.tag})))}),()=>s({builderProps:{uid:e,builderData:l},styles:l.styles,setting:l.settings,advanced:l.advanced,style:a,isText:!!componentTexts.includes(l.tag)||null,parentId:componentsRenderWithParentId.includes(l.tag)?n:null,...i})):render.template`<div style="${a}" class="${l.uid} ${l?.childrens?.length||"IconListItemHoz"!==l.tag?"":"hidden"}">
-      ${render.RenderIf(l?.childrens?.length,()=>s({builderProps:{uid:e,builderData:l},styles:l.styles,setting:l.settings,...i,rawChildren:l.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:d})),children:constant.customRenderChildren.includes(l.tag)?"":WrapRenderChildren({uid:e,customProps:d},l.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:d,parentTag:l.tag})))}),()=>s({builderProps:{uid:e,builderData:l},styles:l.styles,setting:l.settings,isText:!!componentTexts.includes(l.tag)||null,...i}))}
-      </div>`,extraFiles:d.extraFiles}}},RenderChildren=e=>{let t=Render(e);for(let r in t.extraFiles)if(Object.prototype.hasOwnProperty.call(t.extraFiles,r)){let n=t.extraFiles[r];e.customProps.extraFiles[r]=n}let r=new TextEncoder,n=t?.liquid?r.encode(t.liquid).length:0;if(Math.ceil(n/1024)>=180){let r=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[r]=t.liquid,`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},r)=>{let n="";if(r?.length)for(let d=0;d<r.length;d++){let i=r[d];if(i){let r=n+i,l=new TextEncoder,s=r?l.encode(r).length:0;if(Math.ceil(s/1024)>=180){let r=`gp-section-snippet-${e+d}`;t.extraFiles[r]=i,n+=`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id  %}`}else n+=i}}return n};exports.RenderChildren=RenderChildren,exports.WrapRenderChildren=WrapRenderChildren,exports.default=Render;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("react"),require("swr");var render=require("../helpers/render.js");require("../helpers/convert.js");var composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js");const componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],Render=({uid:e,builder:r,components:t,parentId:n,extraFiles:d={},...i})=>{let s=r[e],l=t[s?.tag];if(!l)return console.log("Miss component: ",s),{liquid:"",extraFiles:d};if(!s||s?.type==="section")return{liquid:"",extraFiles:d};{let d={extraFiles:{}},a=composeAdvanceStyle.composeAdvanceStyle(s.advanced,s.tag),o="";o=constant.disableWrap.includes(s.tag)?render.RenderIf(s?.childrens?.length,()=>l({builderProps:{uid:e,builderData:s},styles:s.styles,setting:s.settings,style:a,advanced:s.advanced,parentId:componentsRenderWithParentId.includes(s.tag)?n:null,...i,rawChildren:s.childrens.map(e=>({...r[e],uid:e,builder:r,components:t,customProps:d})),children:constant.customRenderChildren.includes(s.tag)?"":WrapRenderChildren({uid:e,customProps:d},s.childrens.map(e=>RenderChildren({uid:e,builder:r,components:t,customProps:d,parentTag:s.tag})))}),()=>l({builderProps:{uid:e,builderData:s},styles:s.styles,setting:s.settings,advanced:s.advanced,style:a,isText:!!componentTexts.includes(s.tag)||null,parentId:componentsRenderWithParentId.includes(s.tag)?n:null,...i})):render.template`<div style="${a}" class="${s.uid} ${s?.childrens?.length||"IconListItemHoz"!==s.tag?"":"hidden"}">
+      ${render.RenderIf(s?.childrens?.length,()=>l({builderProps:{uid:e,builderData:s},styles:s.styles,setting:s.settings,...i,rawChildren:s.childrens.map(e=>({...r[e],uid:e,builder:r,components:t,customProps:d})),children:constant.customRenderChildren.includes(s.tag)?"":WrapRenderChildren({uid:e,customProps:d},s.childrens.map(e=>RenderChildren({uid:e,builder:r,components:t,customProps:d,parentTag:s.tag})))}),()=>l({builderProps:{uid:e,builderData:s},styles:s.styles,setting:s.settings,isText:!!componentTexts.includes(s.tag)||null,...i}))}
+      </div>`;let{cssCode:c,jsCode:u}=RenderCustomCode(s);return c&&(o+=c),u&&(o+=u),{liquid:o,extraFiles:d.extraFiles}}},RenderCustomCode=e=>{let{css:r,javascript:t}=e.advanced?.editorData||{},n=render.RenderIf(!!r,render.template`
+      <style
+        id="${`custom-css-${e?.uid}`}"
+      >${r}</style>
+    `),d=render.RenderIf(!!t,render.template`
+      <script
+        id="${`custom-js-${e?.uid}`}"
+      >
+        try {
+          ${t}
+        } catch(err){}
+      </script>
+    `);return{cssCode:n,jsCode:d}},RenderChildren=e=>{let r=Render(e);for(let t in r.extraFiles)if(Object.prototype.hasOwnProperty.call(r.extraFiles,t)){let n=r.extraFiles[t];e.customProps.extraFiles[t]=n}let t=new TextEncoder,n=r?.liquid?t.encode(r.liquid).length:0;if(Math.ceil(n/1024)>=180){let t=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[t]=r.liquid,`{% render '${t}', product: product, variant: variant, product_form_id: product_form_id  %}`}return r.liquid},WrapRenderChildren=({uid:e,customProps:r},t)=>{let n="";if(t?.length)for(let d=0;d<t.length;d++){let i=t[d];if(i){let t=n+i,s=new TextEncoder,l=t?s.encode(t).length:0;if(Math.ceil(l/1024)>=180){let t=`gp-section-snippet-${e+d}`;r.extraFiles[t]=i,n+=`{% render '${t}', product: product, variant: variant, product_form_id: product_form_id  %}`}else n+=i}}return n};exports.RenderChildren=RenderChildren,exports.WrapRenderChildren=WrapRenderChildren,exports.default=Render;

package/dist/cjs/components/RenderCustomCode.js

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),Head=require("next/head"),Script=require("next/script"),react=require("react");require("zustand"),require("swr"),require("@gem-sdk/adapter-shopify"),require("swr/mutation");var shop=require("../hooks/shop.js");require("vanilla-lazyload"),require("../hooks/useCartUI.js"),require("../helpers/convert.js");const RenderCustomCode=({props:e})=>{let r=shop.useEditorMode(),{css:s,javascript:t}=e?.advanced?.editorData||{},i={css:`custom-css-${e?.uid}`,javascript:`custom-js-${e?.uid}`},u=react.useMemo(()=>`
+      try {
+        ${t}
+      } catch(err){}
+    `,[t]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Head,{children:!!s&&jsxRuntime.jsx("style",{id:i.css,dangerouslySetInnerHTML:{__html:s}})}),!!t&&"edit"!==r&&jsxRuntime.jsx(Script,{id:i.javascript,dangerouslySetInnerHTML:{__html:u}})]})};exports.default=RenderCustomCode;

package/dist/cjs/contexts/BuilderPreviewContext.js

@@ -1 +1 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),zustand=require("zustand"),cloneDeep=require("../helpers/clone-deep.js"),normalizeBuilderData=require("../helpers/normalize-builder-data.js");function moveByIndex(e,t,i){let r=e.splice(t,1)[0];void 0!==r&&e.splice(i,0,r)}function removeByKey(e,t){let i=t[e];i&&(delete t[e],"section"!==i.type&&i.childrens?.map(e=>removeByKey(e,t)))}const BuilderPreviewContext=react.createContext(null),root={uid:"ROOT",tag:"Root",label:"Root",childrens:[]},createBuilderPreviewProvider=e=>zustand.createStore((t,i)=>({state:e,loaded:!1,addItem:e=>{let{position:r,data:l}=e,d=i().state,n=Date.now();if("section"===e.type){if(!Array.isArray(l)){let e=l.uid,i=d.ROOT;i.childrens?i.childrens.splice(r??0,0,e):i.childrens=[e],i.dateModified=n,t({state:{...d,[e]:{uid:e,type:"section",label:l.label},ROOT:cloneDeep.cloneDeep(i)}})}}else{let{id:i,data:l}=e,s=i?d[i]??d.ROOT:d.ROOT;if("section"===s.type)return;if(Array.isArray(l)){let e=l.map(e=>e.uid),i=l.reduceRight((e,t)=>{let i=normalizeBuilderData.normalizeBuilderData(t);return{...e,...i}},{});s.dateModified=n,s.childrens=s.childrens??[],s.childrens.splice(r??0,0,...e),t({state:{...d,...i,[s.uid]:cloneDeep.cloneDeep(s)}})}else{let e=normalizeBuilderData.normalizeBuilderData(l);s.dateModified=n,s.childrens=s.childrens??[],s.childrens.splice(r??0,0,l.uid),t({state:{...d,...e,[s.uid]:cloneDeep.cloneDeep(s)}})}}},changeItemProp:(e,r,l)=>{if(!l||!["setting","style","advanced"].includes(l))return;let d=i().state,n=d[e];if(n?.type!=="section"&&n){let i=Date.now();switch(n.dateModified=i,l){case"setting":t({state:{...d,[e]:{...n,settings:{...n.settings,...r}}}});break;case"style":t({state:{...d,[e]:{...n,styles:{...n.styles,...r}}}});break;case"advanced":t({state:{...d,[e]:{...n,advanced:{...n.advanced,...r}}}})}}},changeItemPropByKey:({id:e,key:r,data:l,group:d})=>{if(!d||!["setting","style","advanced"].includes(d))return;let n=i().state,s=n[e];if(s?.type!=="section"&&s){let i={style:s.styles??{},advanced:s.advanced??{},setting:s.settings??{}};void 0===l?(console.warn("Data is undefined"),delete i[d][r]):i[d][r]=l,t({state:{...n,[e]:{...s,settings:{...i.setting},styles:{...i.style},advanced:{...i.advanced}}}})}},getItem:e=>i().state[e],removeItem:e=>{if("ROOT"===e)t({state:{ROOT:root}});else{let r=i().state;removeByKey(e,r);let l=Object.entries(r).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(l){let i=Date.now(),[d,n]=l;if("section"===n.type)return;n.childrens=n.childrens?.filter(t=>t!==e),n.dateModified=i,t({state:{...r,[d]:cloneDeep.cloneDeep(n)}})}}},moveItem:(e,r,l)=>{let d=i().state,n=d[e],s=d[r];if(n&&s&&"section"!==s.type){if("section"===n.type){let i=d.ROOT;if(!i.childrens)return;let r=i.childrens.findIndex(t=>t===e);moveByIndex(i.childrens,r,l??0),t({state:{...d,ROOT:cloneDeep.cloneDeep(i)}})}else{let i=Object.entries(d).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(n&&i){let a=Date.now(),[,c]=i;if("section"===c.type)return;if(c.dateModified=a,r===c.uid&&c.childrens){let i=c.childrens.findIndex(t=>t===e);c.childrens&&i!==l&&(moveByIndex(c.childrens,i,l??0),t({state:{...d,[c.uid]:cloneDeep.cloneDeep(c)}}))}else c.childrens=c.childrens?.filter(t=>t!==e),s&&(s.dateModified=a,s.childrens=s.childrens??[],s.childrens.splice(l??0,0,n.uid),t({state:{...d,[s.uid]:cloneDeep.cloneDeep(s),[c.uid]:cloneDeep.cloneDeep(c)}}))}}}},forceChangeState:e=>{t({state:e,loaded:!0})},initState:e=>{if(Array.isArray(e)){let i=e.map(e=>e.uid),r=e.reduceRight((e,t)=>{let i=normalizeBuilderData.normalizeBuilderData(t);return{...e,...i}},{});t({loaded:!0,state:{ROOT:{...root,childrens:i},...r}})}else{let i=normalizeBuilderData.normalizeBuilderData(e);t({loaded:!0,state:{ROOT:{...root,childrens:[e.uid]},...i}})}},addSection:(e,r)=>{let l=i().state,d=l.ROOT;d.childrens||(d.childrens=[]),d.childrens.splice(r??0,0,e.uid),t({state:{...l,ROOT:cloneDeep.cloneDeep(d)}})}})),BuilderPreviewProvider=({children:e,state:t,lazy:i,...r})=>{let l=i?react.Suspense:react.Fragment,d=react.useMemo(()=>createBuilderPreviewProvider(t),[t]);return jsxRuntime.jsx(l,{children:jsxRuntime.jsx(BuilderPreviewContext.Provider,{...r,value:d,children:e})})},useBuilderPreviewStore=(e,t)=>{let i=react.useContext(BuilderPreviewContext);if(!i)throw Error("useBuilderPreviewStore must be used within a BuilderPreviewProvider");return zustand.useStore(i,e,t)};exports.BuilderPreviewProvider=BuilderPreviewProvider,exports.useBuilderPreviewStore=useBuilderPreviewStore;
+"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),zustand=require("zustand"),cloneDeep=require("../helpers/clone-deep.js"),normalizeBuilderData=require("../helpers/normalize-builder-data.js");function moveByIndex(e,t,i){let r=e.splice(t,1)[0];void 0!==r&&e.splice(i,0,r)}function removeByKey(e,t){let i=t[e];i&&(delete t[e],"section"!==i.type&&i.childrens?.map(e=>removeByKey(e,t)))}const BuilderPreviewContext=react.createContext(null),root={uid:"ROOT",tag:"Root",label:"Root",childrens:[]},createBuilderPreviewProvider=e=>zustand.createStore((t,i)=>({state:e,loaded:!1,addItem:e=>{let{position:r,data:s}=e,d=i().state,l=Date.now();if("section"===e.type){if(!Array.isArray(s)){let e=s.uid,i=d.ROOT;i.childrens?i.childrens.splice(r??0,0,e):i.childrens=[e],i.dateModified=l,t({state:{...d,[e]:{uid:e,type:"section",label:s.label},ROOT:cloneDeep.cloneDeep(i)}})}}else{let{id:i,data:s}=e,n=i?d[i]??d.ROOT:d.ROOT;if("section"===n.type)return;if(Array.isArray(s)){let e=s.map(e=>e.uid),i=s.reduceRight((e,t)=>{let i=normalizeBuilderData.normalizeBuilderData(t);return{...e,...i}},{});n.dateModified=l,n.childrens=n.childrens??[],n.childrens.splice(r??0,0,...e),t({state:{...d,...i,[n.uid]:cloneDeep.cloneDeep(n)}})}else{let e=normalizeBuilderData.normalizeBuilderData(s);n.dateModified=l,n.childrens=n.childrens??[],n.childrens.splice(r??0,0,s.uid),t({state:{...d,...e,[n.uid]:cloneDeep.cloneDeep(n)}})}}},changeItemProp:(e,r,s)=>{if(!s||!["setting","style","advanced"].includes(s))return;let d=i().state,l=d[e];if(l?.type!=="section"&&l){let i=Date.now();switch(l.dateModified=i,s){case"setting":t({state:{...d,[e]:{...l,settings:{...l.settings,...r}}}});break;case"style":t({state:{...d,[e]:{...l,styles:{...l.styles,...r}}}});break;case"advanced":t({state:{...d,[e]:{...l,advanced:{...l.advanced,...r}}}})}}},forceChangeItemProp:(e,r,s)=>{if(!s||!["setting","style","advanced"].includes(s))return;let d=i().state,l=d[e];if(l?.type!=="section"&&l){let i=Date.now();switch(l.dateModified=i,s){case"setting":t({state:{...d,[e]:{...l,settings:r}}});break;case"style":t({state:{...d,[e]:{...l,styles:r}}});break;case"advanced":t({state:{...d,[e]:{...l,advanced:r}}})}}},changeItemPropByKey:({id:e,key:r,data:s,group:d})=>{if(!d||!["setting","style","advanced"].includes(d))return;let l=i().state,n=l[e];if(n?.type!=="section"&&n){let i={style:n.styles??{},advanced:n.advanced??{},setting:n.settings??{}};void 0===s?(console.warn("Data is undefined"),delete i[d][r]):i[d][r]=s,t({state:{...l,[e]:{...n,settings:{...i.setting},styles:{...i.style},advanced:{...i.advanced}}}})}},getItem:e=>i().state[e],removeItem:e=>{if("ROOT"===e)t({state:{ROOT:root}});else{let r=i().state;removeByKey(e,r);let s=Object.entries(r).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(s){let i=Date.now(),[d,l]=s;if("section"===l.type)return;l.childrens=l.childrens?.filter(t=>t!==e),l.dateModified=i,t({state:{...r,[d]:cloneDeep.cloneDeep(l)}})}}},moveItem:(e,r,s)=>{let d=i().state,l=d[e],n=d[r];if(l&&n&&"section"!==n.type){if("section"===l.type){let i=d.ROOT;if(!i.childrens)return;let r=i.childrens.findIndex(t=>t===e);moveByIndex(i.childrens,r,s??0),t({state:{...d,ROOT:cloneDeep.cloneDeep(i)}})}else{let i=Object.entries(d).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(l&&i){let a=Date.now(),[,c]=i;if("section"===c.type)return;if(c.dateModified=a,r===c.uid&&c.childrens){let i=c.childrens.findIndex(t=>t===e);c.childrens&&i!==s&&(moveByIndex(c.childrens,i,s??0),t({state:{...d,[c.uid]:cloneDeep.cloneDeep(c)}}))}else c.childrens=c.childrens?.filter(t=>t!==e),n&&(n.dateModified=a,n.childrens=n.childrens??[],n.childrens.splice(s??0,0,l.uid),t({state:{...d,[n.uid]:cloneDeep.cloneDeep(n),[c.uid]:cloneDeep.cloneDeep(c)}}))}}}},forceChangeState:e=>{t({state:e,loaded:!0})},initState:e=>{if(Array.isArray(e)){let i=e.map(e=>e.uid),r=e.reduceRight((e,t)=>{let i=normalizeBuilderData.normalizeBuilderData(t);return{...e,...i}},{});t({loaded:!0,state:{ROOT:{...root,childrens:i},...r}})}else{let i=normalizeBuilderData.normalizeBuilderData(e);t({loaded:!0,state:{ROOT:{...root,childrens:[e.uid]},...i}})}},addSection:(e,r)=>{let s=i().state,d=s.ROOT;d.childrens||(d.childrens=[]),d.childrens.splice(r??0,0,e.uid),t({state:{...s,ROOT:cloneDeep.cloneDeep(d)}})}})),BuilderPreviewProvider=({children:e,state:t,lazy:i,...r})=>{let s=i?react.Suspense:react.Fragment,d=react.useMemo(()=>createBuilderPreviewProvider(t),[t]);return jsxRuntime.jsx(s,{children:jsxRuntime.jsx(BuilderPreviewContext.Provider,{...r,value:d,children:e})})},useBuilderPreviewStore=(e,t)=>{let i=react.useContext(BuilderPreviewContext);if(!i)throw Error("useBuilderPreviewStore must be used within a BuilderPreviewProvider");return zustand.useStore(i,e,t)};exports.BuilderPreviewProvider=BuilderPreviewProvider,exports.useBuilderPreviewStore=useBuilderPreviewStore;

package/dist/esm/components/ComponentWrapperPreview.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{isValidElement as e}from"react";import{composeAdvanceStyle as o}from"../helpers/compose-advance-style.js";import{disableWrap as n}from"./constant.js";let ComponentWrapperPreview=({children:a,...r})=>{if("section"===r.type)return null;let p={};if(r.editorConfigs){let t=r.editorConfigs;t.placeholder?.notAppendBeforeAfter&&(p["data-placeholder-not-append-before-after"]=!0),t.toolbar?.parent&&(p["data-toolbar-parent"]=!0),t.component?.noDelete&&(p["data-component-no-delete"]=!0),t.component?.noDuplicate&&(p["data-component-no-duplicate"]=!0),t.component?.noDragDrop&&(p["data-component-no-drag-drop"]=!0),t.component?.noSetting&&(p["data-component-no-setting"]=!0),t.component?.isThirdParty&&(p["data-component-is-third-party"]=!0),t.toolbar?.hide&&(p["data-toolbar-hide"]=!0),t.slots?.children&&(p["data-slots-children"]=!0)}let d=o(r.advanced,r.tag),l=r.advanced,i={...p,"data-uid":r.uid,"data-component-type":"component","data-component-tag":r.tag,"data-component-label":r.label};return n.includes(r.tag)&&e(a)?t(a.type,{...a.props,style:d,builderAttrs:i,advanced:l}):t("div",{style:d,className:`${r.uid}`,...i,children:a})};export{ComponentWrapperPreview as default};
+import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{isValidElement as n}from"react";import{composeAdvanceStyle as a}from"../helpers/compose-advance-style.js";import{disableWrap as r}from"./constant.js";import p from"./RenderCustomCode.js";let ComponentWrapperPreview=({children:d,...i})=>{if("section"===i.type)return null;let l={};if(i.editorConfigs){let e=i.editorConfigs;e.placeholder?.notAppendBeforeAfter&&(l["data-placeholder-not-append-before-after"]=!0),e.toolbar?.parent&&(l["data-toolbar-parent"]=!0),e.component?.noDelete&&(l["data-component-no-delete"]=!0),e.component?.noDuplicate&&(l["data-component-no-duplicate"]=!0),e.component?.noDragDrop&&(l["data-component-no-drag-drop"]=!0),e.component?.noSetting&&(l["data-component-no-setting"]=!0),e.component?.isThirdParty&&(l["data-component-is-third-party"]=!0),e.toolbar?.hide&&(l["data-toolbar-hide"]=!0),e.slots?.children&&(l["data-slots-children"]=!0)}let c=a(i.advanced,i.tag),m=i.advanced,s={...l,"data-uid":i.uid,"data-component-type":"component","data-component-tag":i.tag,"data-component-label":i.label};return r.includes(i.tag)&&n(d)?e(t,{children:[o(p,{props:i}),o(d.type,{...d.props,style:c,builderAttrs:s,advanced:m})]}):e(t,{children:[o(p,{props:i}),o("div",{style:c,className:`${i.uid}`,...s,children:d})]})};export{ComponentWrapperPreview as default};

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

@@ -1,3 +1,15 @@
-import"react";import"swr";import{RenderIf as e,template as t}from"../helpers/render.js";import"../helpers/convert.js";import{composeAdvanceStyle as r}from"../helpers/compose-advance-style.js";import{disableWrap as n,customRenderChildren as i}from"./constant.js";let componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],Render=({uid:d,builder:l,components:s,parentId:a,extraFiles:o={},...c})=>{let p=l[d],u=s[p?.tag];if(!u)return console.log("Miss component: ",p),{liquid:"",extraFiles:o};if(!p||p?.type==="section")return{liquid:"",extraFiles:o};{let o={extraFiles:{}},h=r(p.advanced,p.tag),g="";return{liquid:g=n.includes(p.tag)?e(p?.childrens?.length,()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,style:h,advanced:p.advanced,parentId:componentsRenderWithParentId.includes(p.tag)?a:null,...c,rawChildren:p.childrens.map(e=>({...l[e],uid:e,builder:l,components:s,customProps:o})),children:i.includes(p.tag)?"":WrapRenderChildren({uid:d,customProps:o},p.childrens.map(e=>RenderChildren({uid:e,builder:l,components:s,customProps:o,parentTag:p.tag})))}),()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,advanced:p.advanced,style:h,isText:!!componentTexts.includes(p.tag)||null,parentId:componentsRenderWithParentId.includes(p.tag)?a:null,...c})):t`<div style="${h}" class="${p.uid} ${p?.childrens?.length||"IconListItemHoz"!==p.tag?"":"hidden"}">
-      ${e(p?.childrens?.length,()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,...c,rawChildren:p.childrens.map(e=>({...l[e],uid:e,builder:l,components:s,customProps:o})),children:i.includes(p.tag)?"":WrapRenderChildren({uid:d,customProps:o},p.childrens.map(e=>RenderChildren({uid:e,builder:l,components:s,customProps:o,parentTag:p.tag})))}),()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,isText:!!componentTexts.includes(p.tag)||null,...c}))}
-      </div>`,extraFiles:o.extraFiles}}},RenderChildren=e=>{let t=Render(e);for(let r in t.extraFiles)if(Object.prototype.hasOwnProperty.call(t.extraFiles,r)){let n=t.extraFiles[r];e.customProps.extraFiles[r]=n}let r=new TextEncoder,n=t?.liquid?r.encode(t.liquid).length:0;if(Math.ceil(n/1024)>=180){let r=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[r]=t.liquid,`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},r)=>{let n="";if(r?.length)for(let i=0;i<r.length;i++){let d=r[i];if(d){let r=n+d,l=new TextEncoder,s=r?l.encode(r).length:0;if(Math.ceil(s/1024)>=180){let r=`gp-section-snippet-${e+i}`;t.extraFiles[r]=d,n+=`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id  %}`}else n+=d}}return n};export{RenderChildren,WrapRenderChildren,Render as default};
+import"react";import"swr";import{RenderIf as e,template as t}from"../helpers/render.js";import"../helpers/convert.js";import{composeAdvanceStyle as r}from"../helpers/compose-advance-style.js";import{disableWrap as n,customRenderChildren as i}from"./constant.js";let componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],Render=({uid:d,builder:s,components:l,parentId:a,extraFiles:o={},...c})=>{let p=s[d],u=l[p?.tag];if(!u)return console.log("Miss component: ",p),{liquid:"",extraFiles:o};if(!p||p?.type==="section")return{liquid:"",extraFiles:o};{let o={extraFiles:{}},h=r(p.advanced,p.tag),g="";g=n.includes(p.tag)?e(p?.childrens?.length,()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,style:h,advanced:p.advanced,parentId:componentsRenderWithParentId.includes(p.tag)?a:null,...c,rawChildren:p.childrens.map(e=>({...s[e],uid:e,builder:s,components:l,customProps:o})),children:i.includes(p.tag)?"":WrapRenderChildren({uid:d,customProps:o},p.childrens.map(e=>RenderChildren({uid:e,builder:s,components:l,customProps:o,parentTag:p.tag})))}),()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,advanced:p.advanced,style:h,isText:!!componentTexts.includes(p.tag)||null,parentId:componentsRenderWithParentId.includes(p.tag)?a:null,...c})):t`<div style="${h}" class="${p.uid} ${p?.childrens?.length||"IconListItemHoz"!==p.tag?"":"hidden"}">
+      ${e(p?.childrens?.length,()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,...c,rawChildren:p.childrens.map(e=>({...s[e],uid:e,builder:s,components:l,customProps:o})),children:i.includes(p.tag)?"":WrapRenderChildren({uid:d,customProps:o},p.childrens.map(e=>RenderChildren({uid:e,builder:s,components:l,customProps:o,parentTag:p.tag})))}),()=>u({builderProps:{uid:d,builderData:p},styles:p.styles,setting:p.settings,isText:!!componentTexts.includes(p.tag)||null,...c}))}
+      </div>`;let{cssCode:m,jsCode:x}=RenderCustomCode(p);return m&&(g+=m),x&&(g+=x),{liquid:g,extraFiles:o.extraFiles}}},RenderCustomCode=r=>{let{css:n,javascript:i}=r.advanced?.editorData||{},d=e(!!n,t`
+      <style
+        id="${`custom-css-${r?.uid}`}"
+      >${n}</style>
+    `),s=e(!!i,t`
+      <script
+        id="${`custom-js-${r?.uid}`}"
+      >
+        try {
+          ${i}
+        } catch(err){}
+      </script>
+    `);return{cssCode:d,jsCode:s}},RenderChildren=e=>{let t=Render(e);for(let r in t.extraFiles)if(Object.prototype.hasOwnProperty.call(t.extraFiles,r)){let n=t.extraFiles[r];e.customProps.extraFiles[r]=n}let r=new TextEncoder,n=t?.liquid?r.encode(t.liquid).length:0;if(Math.ceil(n/1024)>=180){let r=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[r]=t.liquid,`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},r)=>{let n="";if(r?.length)for(let i=0;i<r.length;i++){let d=r[i];if(d){let r=n+d,s=new TextEncoder,l=r?s.encode(r).length:0;if(Math.ceil(l/1024)>=180){let r=`gp-section-snippet-${e+i}`;t.extraFiles[r]=d,n+=`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id  %}`}else n+=d}}return n};export{RenderChildren,WrapRenderChildren,Render as default};

package/dist/esm/components/RenderCustomCode.js

@@ -0,0 +1,5 @@
+import{jsxs as t,Fragment as r,jsx as e}from"react/jsx-runtime";import o from"next/head";import s from"next/script";import{useMemo as i}from"react";import"zustand";import"swr";import"@gem-sdk/adapter-shopify";import"swr/mutation";import{useEditorMode as m}from"../hooks/shop.js";import"vanilla-lazyload";import"../hooks/useCartUI.js";import"../helpers/convert.js";let RenderCustomCode=({props:a})=>{let d=m(),{css:p,javascript:n}=a?.advanced?.editorData||{},c={css:`custom-css-${a?.uid}`,javascript:`custom-js-${a?.uid}`},l=i(()=>`
+      try {
+        ${n}
+      } catch(err){}
+    `,[n]);return t(r,{children:[e(o,{children:!!p&&e("style",{id:c.css,dangerouslySetInnerHTML:{__html:p}})}),!!n&&"edit"!==d&&e(s,{id:c.javascript,dangerouslySetInnerHTML:{__html:l}})]})};export{RenderCustomCode as default};

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useMemo as t,useContext as i,createContext as r,Suspense as d,Fragment as s}from"react";import{useStore as l,createStore as n}from"zustand";import{cloneDeep as a}from"../helpers/clone-deep.js";import{normalizeBuilderData as c}from"../helpers/normalize-builder-data.js";function moveByIndex(e,t,i){let r=e.splice(t,1)[0];void 0!==r&&e.splice(i,0,r)}function removeByKey(e,t){let i=t[e];i&&(delete t[e],"section"!==i.type&&i.childrens?.map(e=>removeByKey(e,t)))}let BuilderPreviewContext=r(null),root={uid:"ROOT",tag:"Root",label:"Root",childrens:[]},createBuilderPreviewProvider=e=>n((t,i)=>({state:e,loaded:!1,addItem:e=>{let{position:r,data:d}=e,s=i().state,l=Date.now();if("section"===e.type){if(!Array.isArray(d)){let e=d.uid,i=s.ROOT;i.childrens?i.childrens.splice(r??0,0,e):i.childrens=[e],i.dateModified=l,t({state:{...s,[e]:{uid:e,type:"section",label:d.label},ROOT:a(i)}})}}else{let{id:i,data:d}=e,n=i?s[i]??s.ROOT:s.ROOT;if("section"===n.type)return;if(Array.isArray(d)){let e=d.map(e=>e.uid),i=d.reduceRight((e,t)=>{let i=c(t);return{...e,...i}},{});n.dateModified=l,n.childrens=n.childrens??[],n.childrens.splice(r??0,0,...e),t({state:{...s,...i,[n.uid]:a(n)}})}else{let e=c(d);n.dateModified=l,n.childrens=n.childrens??[],n.childrens.splice(r??0,0,d.uid),t({state:{...s,...e,[n.uid]:a(n)}})}}},changeItemProp:(e,r,d)=>{if(!d||!["setting","style","advanced"].includes(d))return;let s=i().state,l=s[e];if(l?.type!=="section"&&l){let i=Date.now();switch(l.dateModified=i,d){case"setting":t({state:{...s,[e]:{...l,settings:{...l.settings,...r}}}});break;case"style":t({state:{...s,[e]:{...l,styles:{...l.styles,...r}}}});break;case"advanced":t({state:{...s,[e]:{...l,advanced:{...l.advanced,...r}}}})}}},changeItemPropByKey:({id:e,key:r,data:d,group:s})=>{if(!s||!["setting","style","advanced"].includes(s))return;let l=i().state,n=l[e];if(n?.type!=="section"&&n){let i={style:n.styles??{},advanced:n.advanced??{},setting:n.settings??{}};void 0===d?(console.warn("Data is undefined"),delete i[s][r]):i[s][r]=d,t({state:{...l,[e]:{...n,settings:{...i.setting},styles:{...i.style},advanced:{...i.advanced}}}})}},getItem:e=>i().state[e],removeItem:e=>{if("ROOT"===e)t({state:{ROOT:root}});else{let r=i().state;removeByKey(e,r);let d=Object.entries(r).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(d){let i=Date.now(),[s,l]=d;if("section"===l.type)return;l.childrens=l.childrens?.filter(t=>t!==e),l.dateModified=i,t({state:{...r,[s]:a(l)}})}}},moveItem:(e,r,d)=>{let s=i().state,l=s[e],n=s[r];if(l&&n&&"section"!==n.type){if("section"===l.type){let i=s.ROOT;if(!i.childrens)return;let r=i.childrens.findIndex(t=>t===e);moveByIndex(i.childrens,r,d??0),t({state:{...s,ROOT:a(i)}})}else{let i=Object.entries(s).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(l&&i){let c=Date.now(),[,o]=i;if("section"===o.type)return;if(o.dateModified=c,r===o.uid&&o.childrens){let i=o.childrens.findIndex(t=>t===e);o.childrens&&i!==d&&(moveByIndex(o.childrens,i,d??0),t({state:{...s,[o.uid]:a(o)}}))}else o.childrens=o.childrens?.filter(t=>t!==e),n&&(n.dateModified=c,n.childrens=n.childrens??[],n.childrens.splice(d??0,0,l.uid),t({state:{...s,[n.uid]:a(n),[o.uid]:a(o)}}))}}}},forceChangeState:e=>{t({state:e,loaded:!0})},initState:e=>{if(Array.isArray(e)){let i=e.map(e=>e.uid),r=e.reduceRight((e,t)=>{let i=c(t);return{...e,...i}},{});t({loaded:!0,state:{ROOT:{...root,childrens:i},...r}})}else{let i=c(e);t({loaded:!0,state:{ROOT:{...root,childrens:[e.uid]},...i}})}},addSection:(e,r)=>{let d=i().state,s=d.ROOT;s.childrens||(s.childrens=[]),s.childrens.splice(r??0,0,e.uid),t({state:{...d,ROOT:a(s)}})}})),BuilderPreviewProvider=({children:i,state:r,lazy:l,...n})=>{let a=l?d:s,c=t(()=>createBuilderPreviewProvider(r),[r]);return e(a,{children:e(BuilderPreviewContext.Provider,{...n,value:c,children:i})})},useBuilderPreviewStore=(e,t)=>{let r=i(BuilderPreviewContext);if(!r)throw Error("useBuilderPreviewStore must be used within a BuilderPreviewProvider");return l(r,e,t)};export{BuilderPreviewProvider,useBuilderPreviewStore};
+import{jsx as e}from"react/jsx-runtime";import{useMemo as t,useContext as i,createContext as d,Suspense as r,Fragment as s}from"react";import{useStore as l,createStore as n}from"zustand";import{cloneDeep as a}from"../helpers/clone-deep.js";import{normalizeBuilderData as c}from"../helpers/normalize-builder-data.js";function moveByIndex(e,t,i){let d=e.splice(t,1)[0];void 0!==d&&e.splice(i,0,d)}function removeByKey(e,t){let i=t[e];i&&(delete t[e],"section"!==i.type&&i.childrens?.map(e=>removeByKey(e,t)))}let BuilderPreviewContext=d(null),root={uid:"ROOT",tag:"Root",label:"Root",childrens:[]},createBuilderPreviewProvider=e=>n((t,i)=>({state:e,loaded:!1,addItem:e=>{let{position:d,data:r}=e,s=i().state,l=Date.now();if("section"===e.type){if(!Array.isArray(r)){let e=r.uid,i=s.ROOT;i.childrens?i.childrens.splice(d??0,0,e):i.childrens=[e],i.dateModified=l,t({state:{...s,[e]:{uid:e,type:"section",label:r.label},ROOT:a(i)}})}}else{let{id:i,data:r}=e,n=i?s[i]??s.ROOT:s.ROOT;if("section"===n.type)return;if(Array.isArray(r)){let e=r.map(e=>e.uid),i=r.reduceRight((e,t)=>{let i=c(t);return{...e,...i}},{});n.dateModified=l,n.childrens=n.childrens??[],n.childrens.splice(d??0,0,...e),t({state:{...s,...i,[n.uid]:a(n)}})}else{let e=c(r);n.dateModified=l,n.childrens=n.childrens??[],n.childrens.splice(d??0,0,r.uid),t({state:{...s,...e,[n.uid]:a(n)}})}}},changeItemProp:(e,d,r)=>{if(!r||!["setting","style","advanced"].includes(r))return;let s=i().state,l=s[e];if(l?.type!=="section"&&l){let i=Date.now();switch(l.dateModified=i,r){case"setting":t({state:{...s,[e]:{...l,settings:{...l.settings,...d}}}});break;case"style":t({state:{...s,[e]:{...l,styles:{...l.styles,...d}}}});break;case"advanced":t({state:{...s,[e]:{...l,advanced:{...l.advanced,...d}}}})}}},forceChangeItemProp:(e,d,r)=>{if(!r||!["setting","style","advanced"].includes(r))return;let s=i().state,l=s[e];if(l?.type!=="section"&&l){let i=Date.now();switch(l.dateModified=i,r){case"setting":t({state:{...s,[e]:{...l,settings:d}}});break;case"style":t({state:{...s,[e]:{...l,styles:d}}});break;case"advanced":t({state:{...s,[e]:{...l,advanced:d}}})}}},changeItemPropByKey:({id:e,key:d,data:r,group:s})=>{if(!s||!["setting","style","advanced"].includes(s))return;let l=i().state,n=l[e];if(n?.type!=="section"&&n){let i={style:n.styles??{},advanced:n.advanced??{},setting:n.settings??{}};void 0===r?(console.warn("Data is undefined"),delete i[s][d]):i[s][d]=r,t({state:{...l,[e]:{...n,settings:{...i.setting},styles:{...i.style},advanced:{...i.advanced}}}})}},getItem:e=>i().state[e],removeItem:e=>{if("ROOT"===e)t({state:{ROOT:root}});else{let d=i().state;removeByKey(e,d);let r=Object.entries(d).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(r){let i=Date.now(),[s,l]=r;if("section"===l.type)return;l.childrens=l.childrens?.filter(t=>t!==e),l.dateModified=i,t({state:{...d,[s]:a(l)}})}}},moveItem:(e,d,r)=>{let s=i().state,l=s[e],n=s[d];if(l&&n&&"section"!==n.type){if("section"===l.type){let i=s.ROOT;if(!i.childrens)return;let d=i.childrens.findIndex(t=>t===e);moveByIndex(i.childrens,d,r??0),t({state:{...s,ROOT:a(i)}})}else{let i=Object.entries(s).find(([,t])=>"section"!==t.type&&t.childrens?.includes(e));if(l&&i){let c=Date.now(),[,o]=i;if("section"===o.type)return;if(o.dateModified=c,d===o.uid&&o.childrens){let i=o.childrens.findIndex(t=>t===e);o.childrens&&i!==r&&(moveByIndex(o.childrens,i,r??0),t({state:{...s,[o.uid]:a(o)}}))}else o.childrens=o.childrens?.filter(t=>t!==e),n&&(n.dateModified=c,n.childrens=n.childrens??[],n.childrens.splice(r??0,0,l.uid),t({state:{...s,[n.uid]:a(n),[o.uid]:a(o)}}))}}}},forceChangeState:e=>{t({state:e,loaded:!0})},initState:e=>{if(Array.isArray(e)){let i=e.map(e=>e.uid),d=e.reduceRight((e,t)=>{let i=c(t);return{...e,...i}},{});t({loaded:!0,state:{ROOT:{...root,childrens:i},...d}})}else{let i=c(e);t({loaded:!0,state:{ROOT:{...root,childrens:[e.uid]},...i}})}},addSection:(e,d)=>{let r=i().state,s=r.ROOT;s.childrens||(s.childrens=[]),s.childrens.splice(d??0,0,e.uid),t({state:{...r,ROOT:a(s)}})}})),BuilderPreviewProvider=({children:i,state:d,lazy:l,...n})=>{let a=l?r:s,c=t(()=>createBuilderPreviewProvider(d),[d]);return e(a,{children:e(BuilderPreviewContext.Provider,{...n,value:c,children:i})})},useBuilderPreviewStore=(e,t)=>{let d=i(BuilderPreviewContext);if(!d)throw Error("useBuilderPreviewStore must be used within a BuilderPreviewProvider");return l(d,e,t)};export{BuilderPreviewProvider,useBuilderPreviewStore};

package/dist/types/index.d.ts

@@ -789,6 +789,10 @@ type SwatchesLinkControlType<T> = SharedControlType<T> & {
     id?: string;
     type: 'swatchesLink';
 };
+type VariantSwatchesPresetControlType<T> = SharedControlType<T> & {
+    id?: string;
+    type: 'variant:presets';
+};
 
 type LayoutControlType<T> = SharedControlType<T> & {
     type: 'layout';
@@ -846,7 +850,7 @@ type TypographyV2ControlType<T> = SharedControlType<T> & {
     };
 };
 
-type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T>;
+type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -7237,6 +7241,7 @@ type BuilderPreviewContextProps = {
     addSection: (data: Omit<SectionEntity, 'type'>, position?: number) => void;
     moveItem: (id: string, moveTo: string, position?: number) => void;
     changeItemProp: (id: string, data?: Record<string, any>, group?: GroupPropType) => void;
+    forceChangeItemProp: (id: string, data?: Record<string, any>, group?: GroupPropType) => void;
     changeItemPropByKey: (input: {
         id: string;
         key: string;
@@ -9405,7 +9410,7 @@ type RequiredCursorEdge<T> = {
 };
 declare const fetchVariants: (fetcher: FetchFunc, { id, isSample, isStorefront }: FetchProductParams) => Promise<RequiredCursorEdge<VariantSelectFragment>[]>;
 declare const fetchMedias: (fetcher: FetchFunc, { id, isSample, isStorefront }: FetchProductParams) => Promise<(Pick<MediaEdge, "cursor"> & {
-    node?: Maybe<Pick<Media, "width" | "height" | "id" | "contentType" | "previewImage" | "src" | "alt">>;
+    node?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
 })[]>;
 
 type FetchProductsParams = {
@@ -9600,13 +9605,13 @@ declare const useSelectedOption: () => {
     setSelectedOption: (optionId?: Maybe<string>, optionValue?: Maybe<string>) => void;
     forceSelectedOption: (value?: Record<string, any> | undefined) => void;
 };
-declare const useVariants: () => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "barcode" | "baseID" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "platform" | "price" | "salePrice" | "sku" | "soldIndividually"> & {
+declare const useVariants: () => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
     selectedOptions: Pick<SelectedOption, "value" | "name" | "optionType">[];
-    media?: Maybe<Pick<Media, "width" | "height" | "id" | "contentType" | "previewImage" | "src" | "alt">>;
+    media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
 }>[];
-declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "barcode" | "baseID" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "platform" | "price" | "salePrice" | "sku" | "soldIndividually"> & {
+declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
     selectedOptions: Pick<SelectedOption, "value" | "name" | "optionType">[];
-    media?: Maybe<Pick<Media, "width" | "height" | "id" | "contentType" | "previewImage" | "src" | "alt">>;
+    media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
 }>;
 declare const useCurrentVariant: () => Maybe<VariantSelectFragment>;
 declare const useCurrentVariantInStock: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.14.0-next.179",
+  "version": "1.14.0-next.201",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.12.0",
-    "@gem-sdk/styles": "1.14.0-next.169"
+    "@gem-sdk/styles": "1.14.0-next.198"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",