@webiny/website-builder-react 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/editorComponents/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","contentSdk","SUPPORTED_IMAGE_RESIZE_WIDTHS","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","Fragment","isLoaded","alt","altText","onLoad","srcSet","display","height","backgroundColor","justifyContent","alignItems","fill","width","filter","xmlns","viewBox","d","getSrcSet","srcSetWidths","map","item","join","inputs","setIsLoaded","isEditing","endsWith","toString","imageWidthInt","parseInt","i","length","supportedResizeWidth","push","imageStyles","maxWidth","opacity","transition","setTimeout"],"sources":["Image.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport type { CssProperties } from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\ntype ImageProps = ComponentPropsWithChildren<{\n    title: string;\n    altText: string;\n    image: {\n        id: string;\n        name: string;\n        size: number;\n        mimeType: string;\n        src: string;\n    };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n    const image = useImage(props);\n\n    if (!image.src) {\n        return <ImagePlaceholder style={props.styles} />;\n    }\n\n    if (image.tag === \"object\") {\n        return <object style={image.styles} title={image.title} data={image.src} />;\n    }\n\n    return (\n        <>\n            {!image.isLoaded && <ImagePlaceholder style={image.styles} />}\n            <img\n                alt={image.altText}\n                onLoad={image.onLoad}\n                title={image.title}\n                src={image.src}\n                srcSet={image.srcSet}\n                style={image.styles}\n            />\n        </>\n    );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                height: \"200px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\",\n                ...style\n            }}\n        >\n            <svg\n                style={{\n                    width: \"70px\",\n                    height: \"70px\",\n                    filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n                }}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                height=\"24px\"\n                viewBox=\"0 -960 960 960\"\n                width=\"24px\"\n            >\n                <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n            </svg>\n        </div>\n    );\n};\n\nconst getSrcSet = (src: string, srcSetWidths: number[]) => {\n    return srcSetWidths.map(item => `${src}?width=${item} ${item}w`).join(\", \");\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n    const [isLoaded, setIsLoaded] = useState(contentSdk.isEditing() ? false : true);\n    const { title = \"\", altText, image } = inputs;\n    const src = image?.src;\n\n    const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n    useEffect(() => {\n        if (!src) {\n            setIsLoaded(false);\n        }\n    }, [src]);\n\n    // If a fixed image width in pixels was set, let's filter out unneeded\n    // image resize widths. For example, if 155px was set as the fixed image\n    // width, then we want the `srcset` attribute to only contain 100w and 300w.\n    let srcSetWidths: number[] = [];\n\n    const width = styles.width?.toString();\n\n    if (width && width.endsWith(\"px\")) {\n        const imageWidthInt = parseInt(width);\n        for (let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++) {\n            const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            if (imageWidthInt > supportedResizeWidth) {\n                srcSetWidths.push(supportedResizeWidth);\n            } else {\n                srcSetWidths.push(supportedResizeWidth);\n                break;\n            }\n        }\n    } else {\n        // If a fixed image width was not provided, we\n        // rely on all the supported image resize widths.\n        srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;\n    }\n\n    const srcSet = src ? getSrcSet(src, srcSetWidths) : \"\";\n\n    const imageStyles = {\n        maxWidth: \"100%\",\n        opacity: isLoaded ? 1 : 0,\n        transition: \"opacity 0.3s ease\",\n        ...styles\n    };\n\n    const onLoad = useCallback(() => {\n        if (contentSdk.isEditing()) {\n            setTimeout(() => {\n                setIsLoaded(true);\n            }, 100);\n        } else {\n            setIsLoaded(true);\n        }\n    }, []);\n\n    return {\n        altText,\n        isLoaded,\n        onLoad,\n        src: inputs.image?.src,\n        srcSet,\n        styles: imageStyles,\n        tag,\n        title\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","contentSdk","SUPPORTED_IMAGE_RESIZE_WIDTHS","ImageComponent","props","image","useImage","src","createElement","ImagePlaceholder","style","styles","tag","title","data","Fragment","isLoaded","alt","altText","onLoad","srcSet","display","height","backgroundColor","justifyContent","alignItems","fill","width","filter","xmlns","viewBox","d","getSrcSet","srcSetWidths","map","item","join","inputs","setIsLoaded","isEditing","endsWith","toString","imageWidthInt","parseInt","i","length","supportedResizeWidth","push","imageStyles","maxWidth","opacity","transition","setTimeout"],"sources":["Image.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport type { CssProperties } from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport type { ComponentProps } from \"~/types.js\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\ntype ImageProps = ComponentProps<{\n    title: string;\n    altText: string;\n    image: {\n        id: string;\n        name: string;\n        size: number;\n        mimeType: string;\n        src: string;\n    };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n    const image = useImage(props);\n\n    if (!image.src) {\n        return <ImagePlaceholder style={props.styles} />;\n    }\n\n    if (image.tag === \"object\") {\n        return <object style={image.styles} title={image.title} data={image.src} />;\n    }\n\n    return (\n        <>\n            {!image.isLoaded && <ImagePlaceholder style={image.styles} />}\n            <img\n                alt={image.altText}\n                onLoad={image.onLoad}\n                title={image.title}\n                src={image.src}\n                srcSet={image.srcSet}\n                style={image.styles}\n            />\n        </>\n    );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                height: \"200px\",\n                backgroundColor: \"#f4f4f4\",\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                fill: \"#ffffff\",\n                ...style\n            }}\n        >\n            <svg\n                style={{\n                    width: \"70px\",\n                    height: \"70px\",\n                    filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n                }}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                height=\"24px\"\n                viewBox=\"0 -960 960 960\"\n                width=\"24px\"\n            >\n                <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n            </svg>\n        </div>\n    );\n};\n\nconst getSrcSet = (src: string, srcSetWidths: number[]) => {\n    return srcSetWidths.map(item => `${src}?width=${item} ${item}w`).join(\", \");\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n    const [isLoaded, setIsLoaded] = useState(contentSdk.isEditing() ? false : true);\n    const { title = \"\", altText, image } = inputs;\n    const src = image?.src;\n\n    const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n    useEffect(() => {\n        if (!src) {\n            setIsLoaded(false);\n        }\n    }, [src]);\n\n    // If a fixed image width in pixels was set, let's filter out unneeded\n    // image resize widths. For example, if 155px was set as the fixed image\n    // width, then we want the `srcset` attribute to only contain 100w and 300w.\n    let srcSetWidths: number[] = [];\n\n    const width = styles.width?.toString();\n\n    if (width && width.endsWith(\"px\")) {\n        const imageWidthInt = parseInt(width);\n        for (let i = 0; i < SUPPORTED_IMAGE_RESIZE_WIDTHS.length; i++) {\n            const supportedResizeWidth = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            if (imageWidthInt > supportedResizeWidth) {\n                srcSetWidths.push(supportedResizeWidth);\n            } else {\n                srcSetWidths.push(supportedResizeWidth);\n                break;\n            }\n        }\n    } else {\n        // If a fixed image width was not provided, we\n        // rely on all the supported image resize widths.\n        srcSetWidths = SUPPORTED_IMAGE_RESIZE_WIDTHS;\n    }\n\n    const srcSet = src ? getSrcSet(src, srcSetWidths) : \"\";\n\n    const imageStyles = {\n        maxWidth: \"100%\",\n        opacity: isLoaded ? 1 : 0,\n        transition: \"opacity 0.3s ease\",\n        ...styles\n    };\n\n    const onLoad = useCallback(() => {\n        if (contentSdk.isEditing()) {\n            setTimeout(() => {\n                setIsLoaded(true);\n            }, 100);\n        } else {\n            setIsLoaded(true);\n        }\n    }, []);\n\n    return {\n        altText,\n        isLoaded,\n        onLoad,\n        src: inputs.image?.src,\n        srcSet,\n        styles: imageStyles,\n        tag,\n        title\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE/D,SAASC,UAAU,QAAQ,6BAA6B;AAGxD,MAAMC,6BAA6B,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAc5E,OAAO,MAAMC,cAAc,GAAIC,KAAiB,IAAK;EACjD,MAAMC,KAAK,GAAGC,QAAQ,CAACF,KAAK,CAAC;EAE7B,IAAI,CAACC,KAAK,CAACE,GAAG,EAAE;IACZ,oBAAOV,KAAA,CAAAW,aAAA,CAACC,gBAAgB;MAACC,KAAK,EAAEN,KAAK,CAACO;IAAO,CAAE,CAAC;EACpD;EAEA,IAAIN,KAAK,CAACO,GAAG,KAAK,QAAQ,EAAE;IACxB,oBAAOf,KAAA,CAAAW,aAAA;MAAQE,KAAK,EAAEL,KAAK,CAACM,MAAO;MAACE,KAAK,EAAER,KAAK,CAACQ,KAAM;MAACC,IAAI,EAAET,KAAK,CAACE;IAAI,CAAE,CAAC;EAC/E;EAEA,oBACIV,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAkB,QAAA,QACK,CAACV,KAAK,CAACW,QAAQ,iBAAInB,KAAA,CAAAW,aAAA,CAACC,gBAAgB;IAACC,KAAK,EAAEL,KAAK,CAACM;EAAO,CAAE,CAAC,eAC7Dd,KAAA,CAAAW,aAAA;IACIS,GAAG,EAAEZ,KAAK,CAACa,OAAQ;IACnBC,MAAM,EAAEd,KAAK,CAACc,MAAO;IACrBN,KAAK,EAAER,KAAK,CAACQ,KAAM;IACnBN,GAAG,EAAEF,KAAK,CAACE,GAAI;IACfa,MAAM,EAAEf,KAAK,CAACe,MAAO;IACrBV,KAAK,EAAEL,KAAK,CAACM;EAAO,CACvB,CACH,CAAC;AAEX,CAAC;AAED,MAAMF,gBAAgB,GAAGA,CAAC;EAAEC;AAAgC,CAAC,KAAK;EAC9D,oBACIb,KAAA,CAAAW,aAAA;IACIE,KAAK,EAAE;MACHW,OAAO,EAAE,MAAM;MACfC,MAAM,EAAE,OAAO;MACfC,eAAe,EAAE,SAAS;MAC1BC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,IAAI,EAAE,SAAS;MACf,GAAGhB;IACP;EAAE,gBAEFb,KAAA,CAAAW,aAAA;IACIE,KAAK,EAAE;MACHiB,KAAK,EAAE,MAAM;MACbL,MAAM,EAAE,MAAM;MACdM,MAAM,EAAE;IACZ,CAAE;IACFC,KAAK,EAAC,4BAA4B;IAClCP,MAAM,EAAC,MAAM;IACbQ,OAAO,EAAC,gBAAgB;IACxBH,KAAK,EAAC;EAAM,gBAEZ9B,KAAA,CAAAW,aAAA;IAAMuB,CAAC,EAAC;EAA4M,CAAE,CACrN,CACJ,CAAC;AAEd,CAAC;AAED,MAAMC,SAAS,GAAGA,CAACzB,GAAW,EAAE0B,YAAsB,KAAK;EACvD,OAAOA,YAAY,CAACC,GAAG,CAACC,IAAI,IAAI,GAAG5B,GAAG,UAAU4B,IAAI,IAAIA,IAAI,GAAG,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC;AAC/E,CAAC;AAED,MAAM9B,QAAQ,GAAGA,CAAC;EAAE+B,MAAM;EAAE1B;AAAmB,CAAC,KAAK;EACjD,MAAM,CAACK,QAAQ,EAAEsB,WAAW,CAAC,GAAGtC,QAAQ,CAACC,UAAU,CAACsC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC;EAC/E,MAAM;IAAE1B,KAAK,GAAG,EAAE;IAAEK,OAAO;IAAEb;EAAM,CAAC,GAAGgC,MAAM;EAC7C,MAAM9B,GAAG,GAAGF,KAAK,EAAEE,GAAG;EAEtB,MAAMK,GAAG,GAAGL,GAAG,IAAIA,GAAG,CAACiC,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,KAAK;EAE1DzC,SAAS,CAAC,MAAM;IACZ,IAAI,CAACQ,GAAG,EAAE;MACN+B,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ,CAAC,EAAE,CAAC/B,GAAG,CAAC,CAAC;;EAET;EACA;EACA;EACA,IAAI0B,YAAsB,GAAG,EAAE;EAE/B,MAAMN,KAAK,GAAGhB,MAAM,CAACgB,KAAK,EAAEc,QAAQ,CAAC,CAAC;EAEtC,IAAId,KAAK,IAAIA,KAAK,CAACa,QAAQ,CAAC,IAAI,CAAC,EAAE;IAC/B,MAAME,aAAa,GAAGC,QAAQ,CAAChB,KAAK,CAAC;IACrC,KAAK,IAAIiB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG1C,6BAA6B,CAAC2C,MAAM,EAAED,CAAC,EAAE,EAAE;MAC3D,MAAME,oBAAoB,GAAG5C,6BAA6B,CAAC0C,CAAC,CAAC;MAC7D,IAAIF,aAAa,GAAGI,oBAAoB,EAAE;QACtCb,YAAY,CAACc,IAAI,CAACD,oBAAoB,CAAC;MAC3C,CAAC,MAAM;QACHb,YAAY,CAACc,IAAI,CAACD,oBAAoB,CAAC;QACvC;MACJ;IACJ;EACJ,CAAC,MAAM;IACH;IACA;IACAb,YAAY,GAAG/B,6BAA6B;EAChD;EAEA,MAAMkB,MAAM,GAAGb,GAAG,GAAGyB,SAAS,CAACzB,GAAG,EAAE0B,YAAY,CAAC,GAAG,EAAE;EAEtD,MAAMe,WAAW,GAAG;IAChBC,QAAQ,EAAE,MAAM;IAChBC,OAAO,EAAElC,QAAQ,GAAG,CAAC,GAAG,CAAC;IACzBmC,UAAU,EAAE,mBAAmB;IAC/B,GAAGxC;EACP,CAAC;EAED,MAAMQ,MAAM,GAAGrB,WAAW,CAAC,MAAM;IAC7B,IAAIG,UAAU,CAACsC,SAAS,CAAC,CAAC,EAAE;MACxBa,UAAU,CAAC,MAAM;QACbd,WAAW,CAAC,IAAI,CAAC;MACrB,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHA,WAAW,CAAC,IAAI,CAAC;IACrB;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHpB,OAAO;IACPF,QAAQ;IACRG,MAAM;IACNZ,GAAG,EAAE8B,MAAM,CAAChC,KAAK,EAAEE,GAAG;IACtBa,MAAM;IACNT,MAAM,EAAEqC,WAAW;IACnBpC,GAAG;IACHC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/editorComponents/Image.manifest.js

@@ -1,35 +1,37 @@
 "use client";
 
 import { createFileInput, createTextInput } from "@webiny/website-builder-sdk";
-import { createComponent } from "../createComponent";
-import { ImageComponent } from "./Image";
+import { createComponent } from "../createComponent.js";
+import { ImageComponent } from "./Image.js";
 export const Image = createComponent(ImageComponent, {
   name: "Webiny/Image",
   label: "Image",
+  aiContext: "Displays an image from the file manager with configurable title and alt text.",
   group: "basic",
   image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>`,
   autoApplyStyles: false,
-  inputs: [createFileInput({
-    name: "image",
-    label: "Image",
-    allowedFileTypes: ["image/*"],
-    onChange: ({
-      inputs
-    }) => {
-      if (inputs.image) {
-        inputs.title = inputs.image.name;
-        inputs.altText = inputs.image.name;
+  inputs: {
+    image: createFileInput({
+      label: "Image",
+      allowedFileTypes: ["image/*"],
+      onChange: ({
+        inputs
+      }) => {
+        if (inputs.image) {
+          inputs.title = inputs.image.name;
+          inputs.altText = inputs.image.name;
+        }
       }
-    }
-  }), createTextInput({
-    name: "title",
-    label: "Title",
-    description: "Title of the image"
-  }), createTextInput({
-    name: "altText",
-    label: "Alternate Text",
-    description: "Shown when the user has disabled images"
-  })],
+    }),
+    title: createTextInput({
+      label: "Title",
+      description: "Title of the image"
+    }),
+    altText: createTextInput({
+      label: "Alternate Text",
+      description: "Shown when the user has disabled images"
+    })
+  },
   defaults: {
     styles: {
       width: "100%"

package/editorComponents/Image.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFileInput","createTextInput","createComponent","ImageComponent","Image","name","label","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createFileInput, createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { ImageComponent } from \"./Image\";\n\nexport const Image = createComponent(ImageComponent, {\n    name: \"Webiny/Image\",\n    label: \"Image\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n    autoApplyStyles: false,\n    inputs: [\n        createFileInput({\n            name: \"image\",\n            label: \"Image\",\n            allowedFileTypes: [\"image/*\"],\n            onChange: ({ inputs }) => {\n                if (inputs.image) {\n                    inputs.title = inputs.image.name;\n                    inputs.altText = inputs.image.name;\n                }\n            }\n        }),\n        createTextInput({\n            name: \"title\",\n            label: \"Title\",\n            description: \"Title of the image\"\n        }),\n        createTextInput({\n            name: \"altText\",\n            label: \"Alternate Text\",\n            description: \"Shown when the user has disabled images\"\n        })\n    ],\n    defaults: {\n        styles: {\n            width: \"100%\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe,EAAEC,eAAe,QAAQ,6BAA6B;AAC9E,SAASC,eAAe;AACxB,SAASC,cAAc;AAEvB,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAACC,cAAc,EAAE;EACjDE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE,CACJV,eAAe,CAAC;IACZK,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdK,gBAAgB,EAAE,CAAC,SAAS,CAAC;IAC7BC,QAAQ,EAAEA,CAAC;MAAEF;IAAO,CAAC,KAAK;MACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;QACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACH,IAAI;QAChCK,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACH,IAAI;MACtC;IACJ;EACJ,CAAC,CAAC,EACFJ,eAAe,CAAC;IACZI,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdS,WAAW,EAAE;EACjB,CAAC,CAAC,EACFd,eAAe,CAAC;IACZI,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,gBAAgB;IACvBS,WAAW,EAAE;EACjB,CAAC,CAAC,CACL;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createFileInput","createTextInput","createComponent","ImageComponent","Image","name","label","aiContext","group","image","autoApplyStyles","inputs","allowedFileTypes","onChange","title","altText","description","defaults","styles","width"],"sources":["Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createFileInput, createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { ImageComponent } from \"./Image.js\";\n\nexport const Image = createComponent(ImageComponent, {\n    name: \"Webiny/Image\",\n    label: \"Image\",\n    aiContext: \"Displays an image from the file manager with configurable title and alt text.\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n    autoApplyStyles: false,\n    inputs: {\n        image: createFileInput({\n            label: \"Image\",\n            allowedFileTypes: [\"image/*\"],\n            onChange: ({ inputs }) => {\n                if (inputs.image) {\n                    inputs.title = inputs.image.name;\n                    inputs.altText = inputs.image.name;\n                }\n            }\n        }),\n        title: createTextInput({\n            label: \"Title\",\n            description: \"Title of the image\"\n        }),\n        altText: createTextInput({\n            label: \"Alternate Text\",\n            description: \"Shown when the user has disabled images\"\n        })\n    },\n    defaults: {\n        styles: {\n            width: \"100%\"\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe,EAAEC,eAAe,QAAQ,6BAA6B;AAC9E,SAASC,eAAe;AACxB,SAASC,cAAc;AAEvB,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAACC,cAAc,EAAE;EACjDE,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE,+EAA+E;EAC1FC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,0TAA0T;EACjUC,eAAe,EAAE,KAAK;EACtBC,MAAM,EAAE;IACJF,KAAK,EAAET,eAAe,CAAC;MACnBM,KAAK,EAAE,OAAO;MACdM,gBAAgB,EAAE,CAAC,SAAS,CAAC;MAC7BC,QAAQ,EAAEA,CAAC;QAAEF;MAAO,CAAC,KAAK;QACtB,IAAIA,MAAM,CAACF,KAAK,EAAE;UACdE,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACF,KAAK,CAACJ,IAAI;UAChCM,MAAM,CAACI,OAAO,GAAGJ,MAAM,CAACF,KAAK,CAACJ,IAAI;QACtC;MACJ;IACJ,CAAC,CAAC;IACFS,KAAK,EAAEb,eAAe,CAAC;MACnBK,KAAK,EAAE,OAAO;MACdU,WAAW,EAAE;IACjB,CAAC,CAAC;IACFD,OAAO,EAAEd,eAAe,CAAC;MACrBK,KAAK,EAAE,gBAAgB;MACvBU,WAAW,EAAE;IACjB,CAAC;EACL,CAAC;EACDC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,KAAK,EAAE;IACX;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Lexical.d.ts

@@ -1,13 +1,13 @@
 import React from "react";
-import type { ComponentProps } from "../types";
+import type { ComponentProps } from "../types.js";
 export declare const createLexicalValue: (value: string) => {
     state: string;
+    html: string;
 };
 type LexicalProps = ComponentProps<{
     content: {
-        state: string;
         html?: string;
     };
 }>;
-export declare const LexicalComponent: ({ inputs }: LexicalProps) => React.JSX.Element;
+export declare const LexicalComponent: ({ inputs }: LexicalProps) => React.JSX.Element | null;
 export {};

package/editorComponents/Lexical.js

@@ -1,17 +1,16 @@
 "use client";
 
 import React from "react";
-import { LexicalHtmlRenderer } from "@webiny/lexical-editor";
 export const createLexicalValue = value => {
   return {
-    state: `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${value}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph-element","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`
+    state: `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${value}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"wby-paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
+    html: `<p class="wb-paragraph-1">${value}</p>`
   };
 };
 export const LexicalComponent = ({
   inputs
 }) => {
   const {
-    state,
     html
   } = inputs.content;
   if (html) {
@@ -21,10 +20,7 @@ export const LexicalComponent = ({
       }
     });
   }
-  return /*#__PURE__*/React.createElement(LexicalHtmlRenderer, {
-    value: state,
-    theme: {}
-  });
+  return null;
 };
 
 //# sourceMappingURL=Lexical.js.map

package/editorComponents/Lexical.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","LexicalHtmlRenderer","createLexicalValue","value","state","LexicalComponent","inputs","html","content","createElement","dangerouslySetInnerHTML","__html","theme"],"sources":["Lexical.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LexicalHtmlRenderer } from \"@webiny/lexical-editor\";\nimport type { ComponentProps } from \"~/types\";\n\nexport const createLexicalValue = (value: string) => {\n    return {\n        state: `{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"${value}\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"paragraph-element\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}`\n    };\n};\n\ntype LexicalProps = ComponentProps<{\n    content: {\n        state: string;\n        html?: string;\n    };\n}>;\n\nexport const LexicalComponent = ({ inputs }: LexicalProps) => {\n    const { state, html } = inputs.content;\n\n    if (html) {\n        return <div dangerouslySetInnerHTML={{ __html: html }}></div>;\n    }\n\n    return <LexicalHtmlRenderer value={state} theme={{}} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,wBAAwB;AAG5D,OAAO,MAAMC,kBAAkB,GAAIC,KAAa,IAAK;EACjD,OAAO;IACHC,KAAK,EAAE,+FAA+FD,KAAK;EAC/G,CAAC;AACL,CAAC;AASD,OAAO,MAAME,gBAAgB,GAAGA,CAAC;EAAEC;AAAqB,CAAC,KAAK;EAC1D,MAAM;IAAEF,KAAK;IAAEG;EAAK,CAAC,GAAGD,MAAM,CAACE,OAAO;EAEtC,IAAID,IAAI,EAAE;IACN,oBAAOP,KAAA,CAAAS,aAAA;MAAKC,uBAAuB,EAAE;QAAEC,MAAM,EAAEJ;MAAK;IAAE,CAAM,CAAC;EACjE;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,mBAAmB;IAACE,KAAK,EAAEC,KAAM;IAACQ,KAAK,EAAE,CAAC;EAAE,CAAE,CAAC;AAC3D,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createLexicalValue","value","state","html","LexicalComponent","inputs","content","createElement","dangerouslySetInnerHTML","__html"],"sources":["Lexical.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport type { ComponentProps } from \"~/types.js\";\n\nexport const createLexicalValue = (value: string) => {\n    return {\n        state: `{\"root\":{\"children\":[{\"children\":[{\"detail\":0,\"format\":0,\"mode\":\"normal\",\"style\":\"\",\"text\":\"${value}\",\"type\":\"text\",\"version\":1}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"wby-paragraph\",\"version\":1,\"textFormat\":0,\"textStyle\":\"\"}],\"direction\":\"ltr\",\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}`,\n        html: `<p class=\"wb-paragraph-1\">${value}</p>`\n    };\n};\n\ntype LexicalProps = ComponentProps<{\n    content: {\n        html?: string;\n    };\n}>;\n\nexport const LexicalComponent = ({ inputs }: LexicalProps) => {\n    const { html } = inputs.content;\n\n    if (html) {\n        return <div dangerouslySetInnerHTML={{ __html: html }}></div>;\n    }\n\n    return null;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,kBAAkB,GAAIC,KAAa,IAAK;EACjD,OAAO;IACHC,KAAK,EAAE,+FAA+FD,KAAK,gNAAgN;IAC3TE,IAAI,EAAE,6BAA6BF,KAAK;EAC5C,CAAC;AACL,CAAC;AAQD,OAAO,MAAMG,gBAAgB,GAAGA,CAAC;EAAEC;AAAqB,CAAC,KAAK;EAC1D,MAAM;IAAEF;EAAK,CAAC,GAAGE,MAAM,CAACC,OAAO;EAE/B,IAAIH,IAAI,EAAE;IACN,oBAAOJ,KAAA,CAAAQ,aAAA;MAAKC,uBAAuB,EAAE;QAAEC,MAAM,EAAEN;MAAK;IAAE,CAAM,CAAC;EACjE;EAEA,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/editorComponents/Lexical.manifest.js

@@ -1,11 +1,12 @@
 "use client";
 
 import { createLexicalInput } from "@webiny/website-builder-sdk";
-import { createComponent } from "../createComponent";
-import { LexicalComponent, createLexicalValue } from "./Lexical";
+import { createComponent } from "../createComponent.js";
+import { LexicalComponent, createLexicalValue } from "./Lexical.js";
 export const Lexical = createComponent(LexicalComponent, {
   name: "Webiny/Lexical",
   label: "Rich Text",
+  aiContext: "Rich text content. Generate semantic HTML tags. Do NOT generate markdown.",
   group: "basic",
   image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z"/></svg>`,
   inputs: [createLexicalInput({

package/editorComponents/Lexical.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createLexicalInput","createComponent","LexicalComponent","createLexicalValue","Lexical","name","label","group","image","inputs","defaults","content"],"sources":["Lexical.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createLexicalInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent\";\nimport { LexicalComponent, createLexicalValue } from \"./Lexical\";\n\nexport const Lexical = createComponent(LexicalComponent, {\n    name: \"Webiny/Lexical\",\n    label: \"Rich Text\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z\"/></svg>`,\n    inputs: [\n        createLexicalInput({\n            name: \"content\",\n            label: \"Content\"\n        })\n    ],\n    defaults: {\n        inputs: {\n            content: createLexicalValue(\n                \"Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet.\"\n            )\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,eAAe;AACxB,SAASC,gBAAgB,EAAEC,kBAAkB;AAE7C,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAACC,gBAAgB,EAAE;EACrDG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,WAAW;EAClBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,mMAAmM;EAC1MC,MAAM,EAAE,CACJT,kBAAkB,CAAC;IACfK,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE;EACX,CAAC,CAAC,CACL;EACDI,QAAQ,EAAE;IACND,MAAM,EAAE;MACJE,OAAO,EAAER,kBAAkB,CACvB,yRACJ;IACJ;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createLexicalInput","createComponent","LexicalComponent","createLexicalValue","Lexical","name","label","aiContext","group","image","inputs","defaults","content"],"sources":["Lexical.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createLexicalInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { LexicalComponent, createLexicalValue } from \"./Lexical.js\";\n\nexport const Lexical = createComponent(LexicalComponent, {\n    name: \"Webiny/Lexical\",\n    label: \"Rich Text\",\n    aiContext: \"Rich text content. Generate semantic HTML tags. Do NOT generate markdown.\",\n    group: \"basic\",\n    image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z\"/></svg>`,\n    inputs: [\n        createLexicalInput({\n            name: \"content\",\n            label: \"Content\"\n        })\n    ],\n    defaults: {\n        inputs: {\n            content: createLexicalValue(\n                \"Examine she brother prudent add day ham. Far stairs now coming bed oppose hunted become his. You zealously departure had procuring suspicion. Books whose front would purse if be do decay. Quitting you way formerly disposed perceive ladyship are. Common turned boy direct and yet.\"\n            )\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,eAAe;AACxB,SAASC,gBAAgB,EAAEC,kBAAkB;AAE7C,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAACC,gBAAgB,EAAE;EACrDG,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,WAAW;EAClBC,SAAS,EAAE,2EAA2E;EACtFC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,mMAAmM;EAC1MC,MAAM,EAAE,CACJV,kBAAkB,CAAC;IACfK,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE;EACX,CAAC,CAAC,CACL;EACDK,QAAQ,EAAE;IACND,MAAM,EAAE;MACJE,OAAO,EAAET,kBAAkB,CACvB,yRACJ;IACJ;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/editorComponents/Root.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ComponentPropsWithChildren } from "../types";
+import type { ComponentPropsWithChildren } from "../types.js";
 export declare const RootComponent: ({ inputs }: ComponentPropsWithChildren) => React.JSX.Element;

package/editorComponents/Root.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RootComponent","inputs","createElement","Fragment","children"],"sources":["Root.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types\";\n\nexport const RootComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACrE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","RootComponent","inputs","createElement","Fragment","children"],"sources":["Root.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const RootComponent = ({ inputs }: ComponentPropsWithChildren) => {\n    return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACrE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}

package/editorComponents/Root.manifest.d.ts

@@ -1 +1 @@
-export declare const Root: import("@webiny/website-builder-sdk").Component;
+export declare const Root: import("@webiny/website-builder-sdk/types.js").Component;

package/editorComponents/Root.manifest.js

@@ -1,12 +1,13 @@
 "use client";
 
-import { createComponent } from "../createComponent";
-import { RootComponent } from "./Root";
+import { createComponent } from "../createComponent.js";
+import { RootComponent } from "./Root.js";
 export const Root = createComponent(RootComponent, {
   name: "Webiny/Root",
   label: "Main Content",
   acceptsChildren: true,
-  hideFromToolbar: true
+  hideFromToolbar: true,
+  useInAiContentGeneration: false
 });
 
 //# sourceMappingURL=Root.manifest.js.map

package/editorComponents/Root.manifest.js.map

@@ -1 +1 @@
-{"version":3,"names":["createComponent","RootComponent","Root","name","label","acceptsChildren","hideFromToolbar"],"sources":["Root.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent\";\nimport { RootComponent } from \"./Root\";\n\nexport const Root = createComponent(RootComponent, {\n    name: \"Webiny/Root\",\n    label: \"Main Content\",\n    acceptsChildren: true,\n    hideFromToolbar: true\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,aAAa;AAEtB,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAACC,aAAa,EAAE;EAC/CE,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,cAAc;EACrBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE;AACrB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["createComponent","RootComponent","Root","name","label","acceptsChildren","hideFromToolbar","useInAiContentGeneration"],"sources":["Root.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { RootComponent } from \"./Root.js\";\n\nexport const Root = createComponent(RootComponent, {\n    name: \"Webiny/Root\",\n    label: \"Main Content\",\n    acceptsChildren: true,\n    hideFromToolbar: true,\n    useInAiContentGeneration: false\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,aAAa;AAEtB,OAAO,MAAMC,IAAI,GAAGF,eAAe,CAACC,aAAa,EAAE;EAC/CE,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,cAAc;EACrBC,eAAe,EAAE,IAAI;EACrBC,eAAe,EAAE,IAAI;EACrBC,wBAAwB,EAAE;AAC9B,CAAC,CAAC","ignoreList":[]}

package/editorComponents/index.d.ts

@@ -1 +1 @@
-export declare const editorComponents: import("@webiny/website-builder-sdk").Component[];
+export declare const editorComponents: import("@webiny/website-builder-sdk/types.js").Component[];

package/editorComponents/index.js

@@ -3,8 +3,8 @@ import { Grid } from "./Grid.manifest.js";
 import { Image } from "./Image.manifest.js";
 import { Lexical } from "./Lexical.manifest.js";
 import { Root } from "./Root.manifest.js";
-import { GridColumn } from "./GridColumn.manifest";
-import { Fragment } from "./Fragment.manifest";
+import { GridColumn } from "./GridColumn.manifest.js";
+import { Fragment } from "./Fragment.manifest.js";
 export const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];
 
 //# sourceMappingURL=index.js.map

package/editorComponents/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Box","Grid","Image","Lexical","Root","GridColumn","Fragment","editorComponents"],"sources":["index.ts"],"sourcesContent":["import { Box } from \"./Box.manifest.js\";\nimport { Grid } from \"./Grid.manifest.js\";\nimport { Image } from \"./Image.manifest.js\";\nimport { Lexical } from \"./Lexical.manifest.js\";\nimport { Root } from \"./Root.manifest.js\";\nimport { GridColumn } from \"./GridColumn.manifest\";\nimport { Fragment } from \"./Fragment.manifest\";\n\nexport const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];\n"],"mappings":"AAAA,SAASA,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,KAAK;AACd,SAASC,OAAO;AAChB,SAASC,IAAI;AACb,SAASC,UAAU;AACnB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,gBAAgB,GAAG,CAACH,IAAI,EAAEJ,GAAG,EAAEC,IAAI,EAAEI,UAAU,EAAEH,KAAK,EAAEC,OAAO,EAAEG,QAAQ,CAAC","ignoreList":[]}
+{"version":3,"names":["Box","Grid","Image","Lexical","Root","GridColumn","Fragment","editorComponents"],"sources":["index.ts"],"sourcesContent":["import { Box } from \"./Box.manifest.js\";\nimport { Grid } from \"./Grid.manifest.js\";\nimport { Image } from \"./Image.manifest.js\";\nimport { Lexical } from \"./Lexical.manifest.js\";\nimport { Root } from \"./Root.manifest.js\";\nimport { GridColumn } from \"./GridColumn.manifest.js\";\nimport { Fragment } from \"./Fragment.manifest.js\";\n\nexport const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];\n"],"mappings":"AAAA,SAASA,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,KAAK;AACd,SAASC,OAAO;AAChB,SAASC,IAAI;AACb,SAASC,UAAU;AACnB,SAASC,QAAQ;AAEjB,OAAO,MAAMC,gBAAgB,GAAG,CAACH,IAAI,EAAEJ,GAAG,EAAEC,IAAI,EAAEI,UAAU,EAAEH,KAAK,EAAEC,OAAO,EAAEG,QAAQ,CAAC","ignoreList":[]}

package/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./components/index.js";
 export * from "./createComponent.js";
-export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, StyleSettings } from "@webiny/website-builder-sdk";
-export type { ComponentProps, ComponentPropsWithChildren } from "./types.js";
+export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, type CssProperties, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, type ComponentConstraint, type WebsiteBuilderThemeInput, StyleSettings } from "@webiny/website-builder-sdk";
+export type { ComponentProps, ComponentPropsWithChildren, InferManifest, InferComponentChange, InferDescendantChange } from "./types.js";

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createTextInput","createLongTextInput","createNumberInput","createBooleanInput","createColorInput","createFileInput","createDateInput","createLexicalInput","createSelectInput","createRadioInput","createObjectInput","createTagsInput","createSlotInput","createInput","createElement","createTheme","contentSdk","environment","setHeadersProvider","getHeadersProvider","registerComponentGroup","StyleSettings"],"sources":["index.ts"],"sourcesContent":["export * from \"./components/index.js\";\nexport * from \"./createComponent.js\";\n\nexport {\n    createTextInput,\n    createLongTextInput,\n    createNumberInput,\n    createBooleanInput,\n    createColorInput,\n    createFileInput,\n    createDateInput,\n    createLexicalInput,\n    createSelectInput,\n    createRadioInput,\n    createObjectInput,\n    createTagsInput,\n    createSlotInput,\n    createInput,\n    createElement,\n    createTheme,\n    contentSdk,\n    environment,\n    setHeadersProvider,\n    getHeadersProvider,\n    registerComponentGroup,\n    type Document,\n    type DocumentElement,\n    type Breakpoint,\n    type CreateElementParams,\n    type ContentSDKConfig,\n    type ComponentManifest,\n    type ComponentInput,\n    StyleSettings\n} from \"@webiny/website-builder-sdk\";\n\nexport type { ComponentProps, ComponentPropsWithChildren } from \"./types.js\";\n"],"mappings":"AAAA;AACA;AAEA,SACIA,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,kBAAkB,EAClBC,kBAAkB,EAClBC,sBAAsB,EAQtBC,aAAa,QACV,6BAA6B","ignoreList":[]}
+{"version":3,"names":["createTextInput","createLongTextInput","createNumberInput","createBooleanInput","createColorInput","createFileInput","createDateInput","createLexicalInput","createSelectInput","createRadioInput","createObjectInput","createTagsInput","createSlotInput","createInput","createElement","createTheme","contentSdk","environment","setHeadersProvider","getHeadersProvider","registerComponentGroup","StyleSettings"],"sources":["index.ts"],"sourcesContent":["export * from \"./components/index.js\";\nexport * from \"./createComponent.js\";\n\nexport {\n    createTextInput,\n    createLongTextInput,\n    createNumberInput,\n    createBooleanInput,\n    createColorInput,\n    createFileInput,\n    createDateInput,\n    createLexicalInput,\n    createSelectInput,\n    createRadioInput,\n    createObjectInput,\n    createTagsInput,\n    createSlotInput,\n    createInput,\n    createElement,\n    createTheme,\n    contentSdk,\n    environment,\n    setHeadersProvider,\n    getHeadersProvider,\n    registerComponentGroup,\n    type CssProperties,\n    type Document,\n    type DocumentElement,\n    type Breakpoint,\n    type CreateElementParams,\n    type ContentSDKConfig,\n    type ComponentManifest,\n    type ComponentInput,\n    type ComponentConstraint,\n    type WebsiteBuilderThemeInput,\n    StyleSettings\n} from \"@webiny/website-builder-sdk\";\n\nexport type {\n    ComponentProps,\n    ComponentPropsWithChildren,\n    InferManifest,\n    InferComponentChange,\n    InferDescendantChange\n} from \"./types.js\";\n"],"mappings":"AAAA;AACA;AAEA,SACIA,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAClBC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,WAAW,EACXC,kBAAkB,EAClBC,kBAAkB,EAClBC,sBAAsB,EAWtBC,aAAa,QACV,6BAA6B","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@webiny/website-builder-react",
-	"version": "0.0.0-unstable.e53eceafb5",
-	"main": "index.js",
+	"version": "0.0.0-unstable.e6f0dc8ca7",
+	"type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -17,26 +17,22 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/lexical-editor": "0.0.0-unstable.e53eceafb5",
-		"@webiny/website-builder-sdk": "0.0.0-unstable.e53eceafb5",
+		"@webiny/website-builder-sdk": "0.0.0-unstable.e6f0dc8ca7",
 		"deep-equal": "2.2.3",
-		"mobx": "6.9.0",
-		"mobx-react-lite": "3.4.3",
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"mobx": "6.15.3",
+		"mobx-react-lite": "4.1.1",
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
-		"@types/react": "18.2.79",
-		"@webiny/project-utils": "0.0.0-unstable.e53eceafb5",
-		"typescript": "5.3.3"
+		"@types/react": "18.3.28",
+		"@webiny/build-tools": "0.0.0-unstable.e6f0dc8ca7",
+		"typescript": "6.0.3",
+		"vitest": "4.1.5"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "node ../cli/bin.js run build",
-		"watch": "node ../cli/bin.js run watch"
-	},
-	"gitHead": "e53eceafb5ce1a3872c9b4548939bb2eae5b1aef"
+	"gitHead": "e6f0dc8ca741c1fcc3fec9a5b9e86fdd49544641"
 }

package/types.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { CssProperties, DocumentElement } from "@webiny/website-builder-sdk";
+import type { CssProperties, DocumentElement, ComponentManifestInput, ComponentChangeHandler, DescendantChangeHandler } from "@webiny/website-builder-sdk";
 export type ComponentProps<TInputs = unknown> = {
     inputs: TInputs;
     styles: CssProperties;
@@ -9,3 +8,42 @@ export type ComponentProps<TInputs = unknown> = {
 export type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<TInputs & {
     children: React.ReactNode;
 }>;
+export type ExtractInputs<T> = T extends {
+    inputs: infer I;
+} ? I : never;
+export type ExtractInputNames<T extends (props: any) => any> = keyof ExtractInputs<Parameters<T>[0]>;
+/**
+ * Infer the full typed ComponentManifestInput from a React component.
+ *
+ * @example
+ * ```ts
+ * import type { InferManifest } from "@webiny/website-builder-nextjs";
+ * import type { Funnel } from "./Funnel.js";
+ *
+ * type FunnelManifest = InferManifest<typeof Funnel>;
+ *
+ * // Use indexed access for callback types:
+ * const handler: FunnelManifest["onDescendantChange"] = ctx => {
+ *     ctx.inputs.registry; // fully typed
+ * };
+ * ```
+ */
+export type InferManifest<T extends (props: any) => any> = ComponentManifestInput<ExtractInputs<Parameters<T>[0]>>;
+/**
+ * Extract a single typed onChange handler from a component.
+ *
+ * @example
+ * ```ts
+ * const handler: InferComponentChange<typeof Funnel> = ctx => { ... };
+ * ```
+ */
+export type InferComponentChange<T extends (props: any) => any> = ComponentChangeHandler<ExtractInputs<Parameters<T>[0]>>;
+/**
+ * Extract a single typed onDescendantChange handler from a component.
+ *
+ * @example
+ * ```ts
+ * const handler: InferDescendantChange<typeof Funnel> = ctx => { ... };
+ * ```
+ */
+export type InferDescendantChange<T extends (props: any) => any> = DescendantChangeHandler<ExtractInputs<Parameters<T>[0]>>;

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { CssProperties, DocumentElement } from \"@webiny/website-builder-sdk\";\n\nexport type ComponentProps<TInputs = unknown> = {\n    inputs: TInputs;\n    styles: CssProperties;\n    element: DocumentElement;\n    breakpoint: string;\n};\n\nexport type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<\n    TInputs & { children: React.ReactNode }\n>;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type {\n    CssProperties,\n    DocumentElement,\n    ComponentManifestInput,\n    ComponentChangeHandler,\n    DescendantChangeHandler\n} from \"@webiny/website-builder-sdk\";\n\nexport type ComponentProps<TInputs = unknown> = {\n    inputs: TInputs;\n    styles: CssProperties;\n    element: DocumentElement;\n    breakpoint: string;\n};\n\nexport type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<\n    TInputs & { children: React.ReactNode }\n>;\n\nexport type ExtractInputs<T> = T extends { inputs: infer I } ? I : never;\n\nexport type ExtractInputNames<T extends (props: any) => any> = keyof ExtractInputs<\n    Parameters<T>[0]\n>;\n\n/**\n * Infer the full typed ComponentManifestInput from a React component.\n *\n * @example\n * ```ts\n * import type { InferManifest } from \"@webiny/website-builder-nextjs\";\n * import type { Funnel } from \"./Funnel.js\";\n *\n * type FunnelManifest = InferManifest<typeof Funnel>;\n *\n * // Use indexed access for callback types:\n * const handler: FunnelManifest[\"onDescendantChange\"] = ctx => {\n *     ctx.inputs.registry; // fully typed\n * };\n * ```\n */\nexport type InferManifest<T extends (props: any) => any> = ComponentManifestInput<\n    ExtractInputs<Parameters<T>[0]>\n>;\n\n/**\n * Extract a single typed onChange handler from a component.\n *\n * @example\n * ```ts\n * const handler: InferComponentChange<typeof Funnel> = ctx => { ... };\n * ```\n */\nexport type InferComponentChange<T extends (props: any) => any> = ComponentChangeHandler<\n    ExtractInputs<Parameters<T>[0]>\n>;\n\n/**\n * Extract a single typed onDescendantChange handler from a component.\n *\n * @example\n * ```ts\n * const handler: InferDescendantChange<typeof Funnel> = ctx => { ... };\n * ```\n */\nexport type InferDescendantChange<T extends (props: any) => any> = DescendantChangeHandler<\n    ExtractInputs<Parameters<T>[0]>\n>;\n"],"mappings":"","ignoreList":[]}