@webiny/website-builder-react 0.0.0-unstable.06b2ede40f → 0.0.0-unstable.0d717d18dd

package/editorComponents/index.js

@@ -3,8 +3,17 @@ 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";
-export const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];
+import { GridColumn } from "./GridColumn.manifest.js";
+import { Fragment } from "./Fragment.manifest.js";
+const editorComponents = [
+    Root,
+    Box,
+    Grid,
+    GridColumn,
+    Image,
+    Lexical,
+    Fragment
+];
+export { editorComponents };
 
 //# 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,"file":"editorComponents/index.js","sources":["../../src/editorComponents/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"],"names":["editorComponents","Root","Box","Grid","GridColumn","Image","Lexical","Fragment"],"mappings":";;;;;;;AAQO,MAAMA,mBAAmB;IAACC;IAAMC;IAAKC;IAAMC;IAAYC;IAAOC;IAASC;CAAS"}

package/image/BackgroundImage.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { type Asset } from "@webiny/website-builder-sdk";
+export interface BackgroundImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "style"> {
+    /** The image value (unified `Asset` or a legacy value — both accepted). */
+    image: Asset;
+    /** Content rendered on top of the background (auto-stacked above the image). */
+    children?: React.ReactNode;
+    /** Class applied to the wrapper element. */
+    className?: string;
+    /** Styles merged into the wrapper. Give it a height (e.g. `minHeight`). */
+    style?: React.CSSProperties;
+    /** Class applied to the background `<img>`. */
+    imgClassName?: string;
+    /** Explicit alt text; falls back to the image's stored alt. Empty = decorative. */
+    alt?: string;
+    /** Delivery width requested for the background image. Defaults to 1920. */
+    width?: number;
+    /**
+     * Responsive URL builder — e.g. `({ src, width }) => \`${src}?width=${width}&format=auto\``.
+     * When provided, a `srcSet` is generated from `widths`.
+     */
+    loader?: (params: {
+        src: string;
+        width: number;
+    }) => string;
+    /** Candidate widths for the generated `srcSet`. */
+    widths?: number[];
+    /** The `sizes` attribute (defaults to `100vw`, since backgrounds are usually full-bleed). */
+    sizes?: string;
+    /** Native loading strategy for the background image. */
+    loading?: "eager" | "lazy";
+}
+export declare function BackgroundImage({ image, children, className, style, imgClassName, alt, width, loader, widths, sizes, loading, ...rest }: BackgroundImageProps): React.JSX.Element;

package/image/BackgroundImage.js

@@ -0,0 +1,61 @@
+import react from "react";
+import { normalizeToAsset } from "@webiny/website-builder-sdk";
+const DEFAULT_WIDTHS = [
+    640,
+    750,
+    828,
+    1080,
+    1200,
+    1920,
+    2048
+];
+function BackgroundImage({ image, children, className, style, imgClassName, alt, width = 1920, loader, widths = DEFAULT_WIDTHS, sizes = "100vw", loading, ...rest }) {
+    const asset = normalizeToAsset(image);
+    const src = asset?.src ?? "";
+    const focalPoint = asset?.image?.focalPoint ?? {
+        x: 0.5,
+        y: 0.5
+    };
+    const resolvedAlt = alt ?? asset?.image?.alt ?? "";
+    const resolvedSrc = loader ? loader({
+        src,
+        width
+    }) : src;
+    const srcSet = loader ? widths.map((w)=>`${loader({
+            src,
+            width: w
+        })} ${w}w`).join(", ") || void 0 : void 0;
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        className: className,
+        style: {
+            position: "relative",
+            overflow: "hidden",
+            ...style
+        }
+    }, /*#__PURE__*/ react.createElement("img", {
+        className: imgClassName,
+        src: resolvedSrc,
+        srcSet: srcSet,
+        sizes: srcSet ? sizes : void 0,
+        alt: resolvedAlt,
+        "aria-hidden": "" === resolvedAlt ? true : void 0,
+        loading: loading,
+        style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            objectPosition: `${100 * focalPoint.x}% ${100 * focalPoint.y}%`
+        }
+    }), null != children ? /*#__PURE__*/ react.createElement("div", {
+        style: {
+            position: "relative",
+            zIndex: 1
+        }
+    }, children) : null);
+}
+export { BackgroundImage };
+
+//# sourceMappingURL=BackgroundImage.js.map

package/image/BackgroundImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/BackgroundImage.js","sources":["../../src/image/BackgroundImage.tsx"],"sourcesContent":["import React from \"react\";\nimport { normalizeToAsset, type Asset } from \"@webiny/website-builder-sdk\";\n\nexport interface BackgroundImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"style\"> {\n    /** The image value (unified `Asset` or a legacy value — both accepted). */\n    image: Asset;\n    /** Content rendered on top of the background (auto-stacked above the image). */\n    children?: React.ReactNode;\n    /** Class applied to the wrapper element. */\n    className?: string;\n    /** Styles merged into the wrapper. Give it a height (e.g. `minHeight`). */\n    style?: React.CSSProperties;\n    /** Class applied to the background `<img>`. */\n    imgClassName?: string;\n    /** Explicit alt text; falls back to the image's stored alt. Empty = decorative. */\n    alt?: string;\n    /** Delivery width requested for the background image. Defaults to 1920. */\n    width?: number;\n    /**\n     * Responsive URL builder — e.g. `({ src, width }) => \\`${src}?width=${width}&format=auto\\``.\n     * When provided, a `srcSet` is generated from `widths`.\n     */\n    loader?: (params: { src: string; width: number }) => string;\n    /** Candidate widths for the generated `srcSet`. */\n    widths?: number[];\n    /** The `sizes` attribute (defaults to `100vw`, since backgrounds are usually full-bleed). */\n    sizes?: string;\n    /** Native loading strategy for the background image. */\n    loading?: \"eager\" | \"lazy\";\n}\n\nconst DEFAULT_WIDTHS = [640, 750, 828, 1080, 1200, 1920, 2048];\n\nexport function BackgroundImage({\n    image,\n    children,\n    className,\n    style,\n    imgClassName,\n    alt,\n    width = 1920,\n    loader,\n    widths = DEFAULT_WIDTHS,\n    sizes = \"100vw\",\n    loading,\n    ...rest\n}: BackgroundImageProps) {\n    const asset = normalizeToAsset(image);\n    const src = asset?.src ?? \"\";\n    const focalPoint = asset?.image?.focalPoint ?? { x: 0.5, y: 0.5 };\n    const resolvedAlt = alt ?? asset?.image?.alt ?? \"\";\n\n    const resolvedSrc = loader ? loader({ src, width }) : src;\n    const srcSet = loader\n        ? widths.map(w => `${loader({ src, width: w })} ${w}w`).join(\", \") || undefined\n        : undefined;\n\n    return (\n        <div\n            {...rest}\n            className={className}\n            style={{ position: \"relative\", overflow: \"hidden\", ...style }}\n        >\n            <img\n                className={imgClassName}\n                src={resolvedSrc}\n                srcSet={srcSet}\n                sizes={srcSet ? sizes : undefined}\n                alt={resolvedAlt}\n                aria-hidden={resolvedAlt === \"\" ? true : undefined}\n                loading={loading}\n                style={{\n                    position: \"absolute\",\n                    inset: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    objectFit: \"cover\",\n                    objectPosition: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`\n                }}\n            />\n            {children != null ? (\n                <div style={{ position: \"relative\", zIndex: 1 }}>{children}</div>\n            ) : null}\n        </div>\n    );\n}\n"],"names":["DEFAULT_WIDTHS","BackgroundImage","image","children","className","style","imgClassName","alt","width","loader","widths","sizes","loading","rest","asset","normalizeToAsset","src","focalPoint","resolvedAlt","resolvedSrc","srcSet","w","undefined"],"mappings":";;AA+BA,MAAMA,iBAAiB;IAAC;IAAK;IAAK;IAAK;IAAM;IAAM;IAAM;CAAK;AAEvD,SAASC,gBAAgB,EAC5BC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,YAAY,EACZC,GAAG,EACHC,QAAQ,IAAI,EACZC,MAAM,EACNC,SAASV,cAAc,EACvBW,QAAQ,OAAO,EACfC,OAAO,EACP,GAAGC,MACgB;IACnB,MAAMC,QAAQC,iBAAiBb;IAC/B,MAAMc,MAAMF,OAAO,OAAO;IAC1B,MAAMG,aAAaH,OAAO,OAAO,cAAc;QAAE,GAAG;QAAK,GAAG;IAAI;IAChE,MAAMI,cAAcX,OAAOO,OAAO,OAAO,OAAO;IAEhD,MAAMK,cAAcV,SAASA,OAAO;QAAEO;QAAKR;IAAM,KAAKQ;IACtD,MAAMI,SAASX,SACTC,OAAO,GAAG,CAACW,CAAAA,IAAK,GAAGZ,OAAO;YAAEO;YAAK,OAAOK;QAAE,GAAG,CAAC,EAAEA,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,SAASC,SACpEA;IAEN,OAAO,WAAP,GACI,oBAAC;QACI,GAAGT,IAAI;QACR,WAAWT;QACX,OAAO;YAAE,UAAU;YAAY,UAAU;YAAU,GAAGC,KAAK;QAAC;qBAE5D,oBAAC;QACG,WAAWC;QACX,KAAKa;QACL,QAAQC;QACR,OAAOA,SAAST,QAAQW;QACxB,KAAKJ;QACL,eAAaA,AAAgB,OAAhBA,cAAqB,OAAOI;QACzC,SAASV;QACT,OAAO;YACH,UAAU;YACV,OAAO;YACP,OAAO;YACP,QAAQ;YACR,WAAW;YACX,gBAAgB,GAAGK,AAAe,MAAfA,WAAW,CAAC,CAAO,EAAE,EAAEA,AAAe,MAAfA,WAAW,CAAC,CAAO,CAAC,CAAC;QACnE;QAEHd,AAAY,QAAZA,WAAmB,WAAP,GACT,oBAAC;QAAI,OAAO;YAAE,UAAU;YAAY,QAAQ;QAAE;OAAIA,YAClD;AAGhB"}

package/image/Image.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { AspectRatioInput, Asset } from "@webiny/website-builder-sdk";
+export interface ImageComponentProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height" | "style" | "alt"> {
+    image: Asset;
+    /** Target aspect ratio (e.g. `16 / 9` or `{ width, height }`). Omit for the crop's own ratio. */
+    aspectRatio?: AspectRatioInput;
+    /** Explicit alt text; falls back to the image's stored alt. */
+    alt?: string;
+    /** Class applied to the wrapper element. */
+    className?: string;
+    /** Class applied to the `<img>` element. */
+    imgClassName?: string;
+    /** Extra styles merged into the wrapper (e.g. `maxWidth`). */
+    style?: React.CSSProperties;
+    /**
+     * Optional responsive URL builder — e.g. `({ src, width }) => \`${src}?width=${width}\``.
+     * When provided, a `srcSet` is generated from `widths`. This is also the seam for a
+     * future server/CDN transform (crop params can be appended here).
+     */
+    loader?: (params: {
+        src: string;
+        width: number;
+    }) => string;
+    /** Candidate widths for the generated `srcSet` (defaults to a common set). */
+    widths?: number[];
+    /** The `sizes` attribute for responsive selection. */
+    sizes?: string;
+}
+export declare function Image({ image, aspectRatio, alt, className, imgClassName, style, loader, widths, sizes, ...imgProps }: ImageComponentProps): React.JSX.Element;

package/image/Image.js

@@ -0,0 +1,43 @@
+import react from "react";
+import { getImageProps } from "./getImageProps.js";
+const DEFAULT_WIDTHS = [
+    640,
+    750,
+    828,
+    1080,
+    1200,
+    1920,
+    2048
+];
+function Image({ image, aspectRatio, alt, className, imgClassName, style, loader, widths = DEFAULT_WIDTHS, sizes, ...imgProps }) {
+    const { style: containerStyle, imgStyle, src, alt: resolvedAlt, width } = getImageProps(image, {
+        aspectRatio,
+        alt
+    });
+    const srcSet = loader ? widths.filter((w)=>!width || w <= width).map((w)=>`${loader({
+            src,
+            width: w
+        })} ${w}w`).join(", ") || void 0 : void 0;
+    const resolvedSrc = loader ? loader({
+        src,
+        width: width || widths[widths.length - 1]
+    }) : src;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className,
+        style: {
+            ...containerStyle,
+            ...style
+        }
+    }, /*#__PURE__*/ react.createElement("img", {
+        ...imgProps,
+        className: imgClassName,
+        src: resolvedSrc,
+        srcSet: srcSet,
+        sizes: sizes,
+        alt: resolvedAlt,
+        style: imgStyle
+    }));
+}
+export { Image };
+
+//# sourceMappingURL=Image.js.map

package/image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import React from \"react\";\nimport type { AspectRatioInput, Asset } from \"@webiny/website-builder-sdk\";\nimport { getImageProps } from \"./getImageProps.js\";\n\nexport interface ImageComponentProps extends Omit<\n    React.ImgHTMLAttributes<HTMLImageElement>,\n    \"src\" | \"width\" | \"height\" | \"style\" | \"alt\"\n> {\n    image: Asset;\n    /** Target aspect ratio (e.g. `16 / 9` or `{ width, height }`). Omit for the crop's own ratio. */\n    aspectRatio?: AspectRatioInput;\n    /** Explicit alt text; falls back to the image's stored alt. */\n    alt?: string;\n    /** Class applied to the wrapper element. */\n    className?: string;\n    /** Class applied to the `<img>` element. */\n    imgClassName?: string;\n    /** Extra styles merged into the wrapper (e.g. `maxWidth`). */\n    style?: React.CSSProperties;\n    /**\n     * Optional responsive URL builder — e.g. `({ src, width }) => \\`${src}?width=${width}\\``.\n     * When provided, a `srcSet` is generated from `widths`. This is also the seam for a\n     * future server/CDN transform (crop params can be appended here).\n     */\n    loader?: (params: { src: string; width: number }) => string;\n    /** Candidate widths for the generated `srcSet` (defaults to a common set). */\n    widths?: number[];\n    /** The `sizes` attribute for responsive selection. */\n    sizes?: string;\n}\n\nconst DEFAULT_WIDTHS = [640, 750, 828, 1080, 1200, 1920, 2048];\n\nexport function Image({\n    image,\n    aspectRatio,\n    alt,\n    className,\n    imgClassName,\n    style,\n    loader,\n    widths = DEFAULT_WIDTHS,\n    sizes,\n    ...imgProps\n}: ImageComponentProps) {\n    const {\n        style: containerStyle,\n        imgStyle,\n        src,\n        alt: resolvedAlt,\n        width\n    } = getImageProps(image, { aspectRatio, alt });\n\n    const srcSet = loader\n        ? widths\n              .filter(w => !width || w <= width)\n              .map(w => `${loader({ src, width: w })} ${w}w`)\n              .join(\", \") || undefined\n        : undefined;\n\n    const resolvedSrc = loader ? loader({ src, width: width || widths[widths.length - 1] }) : src;\n\n    return (\n        <div className={className} style={{ ...containerStyle, ...style }}>\n            <img\n                {...imgProps}\n                className={imgClassName}\n                src={resolvedSrc}\n                srcSet={srcSet}\n                sizes={sizes}\n                alt={resolvedAlt}\n                style={imgStyle}\n            />\n        </div>\n    );\n}\n"],"names":["DEFAULT_WIDTHS","Image","image","aspectRatio","alt","className","imgClassName","style","loader","widths","sizes","imgProps","containerStyle","imgStyle","src","resolvedAlt","width","getImageProps","srcSet","w","undefined","resolvedSrc"],"mappings":";;AA+BA,MAAMA,iBAAiB;IAAC;IAAK;IAAK;IAAK;IAAM;IAAM;IAAM;CAAK;AAEvD,SAASC,MAAM,EAClBC,KAAK,EACLC,WAAW,EACXC,GAAG,EACHC,SAAS,EACTC,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,SAAST,cAAc,EACvBU,KAAK,EACL,GAAGC,UACe;IAClB,MAAM,EACF,OAAOC,cAAc,EACrBC,QAAQ,EACRC,GAAG,EACH,KAAKC,WAAW,EAChBC,KAAK,EACR,GAAGC,cAAcf,OAAO;QAAEC;QAAaC;IAAI;IAE5C,MAAMc,SAASV,SACTC,OACK,MAAM,CAACU,CAAAA,IAAK,CAACH,SAASG,KAAKH,OAC3B,GAAG,CAACG,CAAAA,IAAK,GAAGX,OAAO;YAAEM;YAAK,OAAOK;QAAE,GAAG,CAAC,EAAEA,EAAE,CAAC,CAAC,EAC7C,IAAI,CAAC,SAASC,SACnBA;IAEN,MAAMC,cAAcb,SAASA,OAAO;QAAEM;QAAK,OAAOE,SAASP,MAAM,CAACA,OAAO,MAAM,GAAG,EAAE;IAAC,KAAKK;IAE1F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWT;QAAW,OAAO;YAAE,GAAGO,cAAc;YAAE,GAAGL,KAAK;QAAC;qBAC5D,oBAAC;QACI,GAAGI,QAAQ;QACZ,WAAWL;QACX,KAAKe;QACL,QAAQH;QACR,OAAOR;QACP,KAAKK;QACL,OAAOF;;AAIvB"}

package/image/getImageProps.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties } from "react";
+import { type AspectRatioInput, type Asset } from "@webiny/website-builder-sdk";
+export interface ImageProps {
+    /** Wrapper style: an aspect-ratio box that clips overflow. Spread onto a container. */
+    style: CSSProperties;
+    /** Image style: absolutely positioned to reveal exactly the cropped/focused region. */
+    imgStyle: CSSProperties;
+    /** The image URL. */
+    src: string;
+    /** Resolved alt text (explicit override, else the image's stored alt, else ""). */
+    alt: string;
+    /** Intrinsic (original) pixel dimensions of the asset. */
+    width: number;
+    height: number;
+}
+export interface ImageValue {
+    id: string;
+    name: string;
+    size: number;
+    mimeType: string;
+    src: string;
+    width: number;
+    height: number;
+}
+export interface GetImagePropsOptions {
+    /** Target aspect ratio. Omit to render at the crop's own aspect ratio. */
+    aspectRatio?: AspectRatioInput;
+    /** Explicit alt text; falls back to the image's stored `image.alt`. */
+    alt?: string;
+}
+/**
+ * Compute the props needed to render a Webiny image honoring its crop + focal point,
+ * using pure CSS (no image backend). Works with a plain `<img>`, SSR, and static
+ * export. Spread `style` onto a wrapper element and `imgStyle` onto the `<img>`.
+ *
+ * Accepts either the unified {@link Asset} shape or a legacy
+ * `ImageValue` (existing page snapshots) — both are normalized transparently.
+ *
+ * This is the escape hatch for custom rendering; most consumers can use the
+ * `<Image>` component instead.
+ */
+export declare function getImageProps(input: Asset | ImageValue, options?: GetImagePropsOptions): ImageProps;

package/image/getImageProps.js

@@ -0,0 +1,18 @@
+import { getAssetImageRenderData, normalizeToAsset } from "@webiny/website-builder-sdk";
+function getImageProps(input, options = {}) {
+    const asset = normalizeToAsset(input);
+    const data = getAssetImageRenderData({
+        image: asset?.image
+    }, options.aspectRatio);
+    return {
+        style: data.container,
+        imgStyle: data.image,
+        src: asset?.src ?? "",
+        alt: options.alt ?? asset?.image?.alt ?? "",
+        width: data.intrinsicWidth,
+        height: data.intrinsicHeight
+    };
+}
+export { getImageProps };
+
+//# sourceMappingURL=getImageProps.js.map

package/image/getImageProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/getImageProps.js","sources":["../../src/image/getImageProps.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport {\n    getAssetImageRenderData,\n    normalizeToAsset,\n    type AspectRatioInput,\n    type Asset\n} from \"@webiny/website-builder-sdk\";\n\nexport interface ImageProps {\n    /** Wrapper style: an aspect-ratio box that clips overflow. Spread onto a container. */\n    style: CSSProperties;\n    /** Image style: absolutely positioned to reveal exactly the cropped/focused region. */\n    imgStyle: CSSProperties;\n    /** The image URL. */\n    src: string;\n    /** Resolved alt text (explicit override, else the image's stored alt, else \"\"). */\n    alt: string;\n    /** Intrinsic (original) pixel dimensions of the asset. */\n    width: number;\n    height: number;\n}\n\nexport interface ImageValue {\n    id: string;\n    name: string;\n    size: number;\n    mimeType: string; // not \"type\"\n    src: string;\n    width: number; // top-level, not nested in image\n    height: number; // top-level\n}\n\nexport interface GetImagePropsOptions {\n    /** Target aspect ratio. Omit to render at the crop's own aspect ratio. */\n    aspectRatio?: AspectRatioInput;\n    /** Explicit alt text; falls back to the image's stored `image.alt`. */\n    alt?: string;\n}\n\n/**\n * Compute the props needed to render a Webiny image honoring its crop + focal point,\n * using pure CSS (no image backend). Works with a plain `<img>`, SSR, and static\n * export. Spread `style` onto a wrapper element and `imgStyle` onto the `<img>`.\n *\n * Accepts either the unified {@link Asset} shape or a legacy\n * `ImageValue` (existing page snapshots) — both are normalized transparently.\n *\n * This is the escape hatch for custom rendering; most consumers can use the\n * `<Image>` component instead.\n */\nexport function getImageProps(\n    input: Asset | ImageValue,\n    options: GetImagePropsOptions = {}\n): ImageProps {\n    const asset = normalizeToAsset(input);\n    const data = getAssetImageRenderData({ image: asset?.image }, options.aspectRatio);\n\n    return {\n        style: data.container,\n        imgStyle: data.image,\n        src: asset?.src ?? \"\",\n        alt: options.alt ?? asset?.image?.alt ?? \"\",\n        width: data.intrinsicWidth,\n        height: data.intrinsicHeight\n    };\n}\n"],"names":["getImageProps","input","options","asset","normalizeToAsset","data","getAssetImageRenderData"],"mappings":";AAkDO,SAASA,cACZC,KAAyB,EACzBC,UAAgC,CAAC,CAAC;IAElC,MAAMC,QAAQC,iBAAiBH;IAC/B,MAAMI,OAAOC,wBAAwB;QAAE,OAAOH,OAAO;IAAM,GAAGD,QAAQ,WAAW;IAEjF,OAAO;QACH,OAAOG,KAAK,SAAS;QACrB,UAAUA,KAAK,KAAK;QACpB,KAAKF,OAAO,OAAO;QACnB,KAAKD,QAAQ,GAAG,IAAIC,OAAO,OAAO,OAAO;QACzC,OAAOE,KAAK,cAAc;QAC1B,QAAQA,KAAK,eAAe;IAChC;AACJ"}

package/image/getImageProps.test.d.ts

@@ -0,0 +1 @@
+export {};

package/image/getImageProps.test.js

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { getImageProps } from "./getImageProps.js";
+const asset = (overrides = {})=>({
+        id: "1",
+        name: "photo.jpg",
+        size: 1234,
+        type: "image/jpeg",
+        src: "https://cdn.test/photo.jpg",
+        url: "https://cdn.test/photo.jpg",
+        image: {
+            width: 1600,
+            height: 900
+        },
+        ...overrides
+    });
+describe("getImageProps", ()=>{
+    it("returns wrapper + image styles and passes through src and dimensions", ()=>{
+        const props = getImageProps(asset());
+        expect(props.src).toBe("https://cdn.test/photo.jpg");
+        expect(props.width).toBe(1600);
+        expect(props.height).toBe(900);
+        expect(props.style.overflow).toBe("hidden");
+        expect(props.style.position).toBe("relative");
+        expect(props.imgStyle.position).toBe("absolute");
+    });
+    it("resolves alt from the explicit option first", ()=>{
+        const props = getImageProps(asset({
+            image: {
+                alt: "stored alt"
+            }
+        }), {
+            alt: "explicit alt"
+        });
+        expect(props.alt).toBe("explicit alt");
+    });
+    it("falls back to the image's stored alt", ()=>{
+        const props = getImageProps(asset({
+            image: {
+                alt: "stored alt"
+            }
+        }));
+        expect(props.alt).toBe("stored alt");
+    });
+    it("defaults alt to an empty string", ()=>{
+        expect(getImageProps(asset()).alt).toBe("");
+    });
+    it("produces a wrapper with the requested aspect ratio", ()=>{
+        const props = getImageProps(asset(), {
+            aspectRatio: 1
+        });
+        expect(props.style.aspectRatio).toBe("1");
+    });
+    it("offsets the image to reveal a focal-point-shifted crop region", ()=>{
+        const props = getImageProps(asset({
+            image: {
+                width: 1600,
+                height: 900,
+                focalPoint: {
+                    x: 0.9,
+                    y: 0.5
+                }
+            }
+        }), {
+            aspectRatio: 1
+        });
+        expect(parseFloat(props.imgStyle.left)).toBeLessThan(0);
+    });
+});
+
+//# sourceMappingURL=getImageProps.test.js.map

package/image/getImageProps.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/getImageProps.test.js","sources":["../../src/image/getImageProps.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport { getImageProps } from \"./getImageProps.js\";\nimport type { Asset } from \"@webiny/website-builder-sdk\";\n\nconst asset = (overrides: Partial<Asset> = {}): Asset => ({\n    id: \"1\",\n    name: \"photo.jpg\",\n    size: 1234,\n    type: \"image/jpeg\",\n    src: \"https://cdn.test/photo.jpg\",\n    url: \"https://cdn.test/photo.jpg\",\n    image: { width: 1600, height: 900 },\n    ...overrides\n});\n\ndescribe(\"getImageProps\", () => {\n    it(\"returns wrapper + image styles and passes through src and dimensions\", () => {\n        const props = getImageProps(asset());\n        expect(props.src).toBe(\"https://cdn.test/photo.jpg\");\n        expect(props.width).toBe(1600);\n        expect(props.height).toBe(900);\n        expect(props.style.overflow).toBe(\"hidden\");\n        expect(props.style.position).toBe(\"relative\");\n        expect(props.imgStyle.position).toBe(\"absolute\");\n    });\n\n    it(\"resolves alt from the explicit option first\", () => {\n        const props = getImageProps(asset({ image: { alt: \"stored alt\" } }), {\n            alt: \"explicit alt\"\n        });\n        expect(props.alt).toBe(\"explicit alt\");\n    });\n\n    it(\"falls back to the image's stored alt\", () => {\n        const props = getImageProps(asset({ image: { alt: \"stored alt\" } }));\n        expect(props.alt).toBe(\"stored alt\");\n    });\n\n    it(\"defaults alt to an empty string\", () => {\n        expect(getImageProps(asset()).alt).toBe(\"\");\n    });\n\n    it(\"produces a wrapper with the requested aspect ratio\", () => {\n        const props = getImageProps(asset(), { aspectRatio: 1 });\n        expect(props.style.aspectRatio).toBe(\"1\");\n    });\n\n    it(\"offsets the image to reveal a focal-point-shifted crop region\", () => {\n        const props = getImageProps(\n            asset({\n                image: {\n                    width: 1600,\n                    height: 900,\n                    focalPoint: { x: 0.9, y: 0.5 }\n                }\n            }),\n            { aspectRatio: 1 }\n        );\n        expect(parseFloat(props.imgStyle.left as string)).toBeLessThan(0);\n    });\n});\n"],"names":["asset","overrides","describe","it","props","getImageProps","expect","parseFloat"],"mappings":";;AAIA,MAAMA,QAAQ,CAACC,YAA4B,CAAC,CAAC,GAAa;QACtD,IAAI;QACJ,MAAM;QACN,MAAM;QACN,MAAM;QACN,KAAK;QACL,KAAK;QACL,OAAO;YAAE,OAAO;YAAM,QAAQ;QAAI;QAClC,GAAGA,SAAS;IAChB;AAEAC,SAAS,iBAAiB;IACtBC,GAAG,wEAAwE;QACvE,MAAMC,QAAQC,cAAcL;QAC5BM,OAAOF,MAAM,GAAG,EAAE,IAAI,CAAC;QACvBE,OAAOF,MAAM,KAAK,EAAE,IAAI,CAAC;QACzBE,OAAOF,MAAM,MAAM,EAAE,IAAI,CAAC;QAC1BE,OAAOF,MAAM,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;QAClCE,OAAOF,MAAM,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;QAClCE,OAAOF,MAAM,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzC;IAEAD,GAAG,+CAA+C;QAC9C,MAAMC,QAAQC,cAAcL,MAAM;YAAE,OAAO;gBAAE,KAAK;YAAa;QAAE,IAAI;YACjE,KAAK;QACT;QACAM,OAAOF,MAAM,GAAG,EAAE,IAAI,CAAC;IAC3B;IAEAD,GAAG,wCAAwC;QACvC,MAAMC,QAAQC,cAAcL,MAAM;YAAE,OAAO;gBAAE,KAAK;YAAa;QAAE;QACjEM,OAAOF,MAAM,GAAG,EAAE,IAAI,CAAC;IAC3B;IAEAD,GAAG,mCAAmC;QAClCG,OAAOD,cAAcL,SAAS,GAAG,EAAE,IAAI,CAAC;IAC5C;IAEAG,GAAG,sDAAsD;QACrD,MAAMC,QAAQC,cAAcL,SAAS;YAAE,aAAa;QAAE;QACtDM,OAAOF,MAAM,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC;IACzC;IAEAD,GAAG,iEAAiE;QAChE,MAAMC,QAAQC,cACVL,MAAM;YACF,OAAO;gBACH,OAAO;gBACP,QAAQ;gBACR,YAAY;oBAAE,GAAG;oBAAK,GAAG;gBAAI;YACjC;QACJ,IACA;YAAE,aAAa;QAAE;QAErBM,OAAOC,WAAWH,MAAM,QAAQ,CAAC,IAAI,GAAa,YAAY,CAAC;IACnE;AACJ"}

package/image/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./getImageProps.js";
+export * from "./Image.js";
+export * from "./BackgroundImage.js";

package/image/index.js

@@ -0,0 +1,3 @@
+export * from "./getImageProps.js";
+export * from "./Image.js";
+export * from "./BackgroundImage.js";

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, type WebsiteBuilderThemeInput, StyleSettings } from "@webiny/website-builder-sdk";
-export type { ComponentProps, ComponentPropsWithChildren } from "./types.js";
+export { createComponent } from "@webiny/website-builder-sdk";
+export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, getPageWithExperiment, resolveVisitorContext, assignVariant, forcedAssignment, registerAnalyticsProvider, getAnalyticsProvider, ASPECT_RATIO_PRESETS, FORCED_VARIANT_PARAM, DEFAULT_VISITOR_COOKIE, CONTROL_VARIANT_ID, type ActiveExperiment, type ActiveExperimentVariant, type VariantContent, type VariantAssignment, type VisitorContext, type DeviceType, type ExperimentTrafficSplit, type ExperimentTargeting, type ExperimentAnalyticsConfig, type ExperimentSdk, type ExperimentRenderResult, type GetPageWithExperimentOptions, type ExperimentCookie, type CssProperties, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, type ComponentConstraint, type WebsiteBuilderThemeInput, type AssetCrop, type AssetFocalPoint, type Asset, type AssetImage, type AssetDocument, type AssetVideo, type AssetCategory, normalizeToAsset, getAssetCategory, getAssetUrl, getAssetCropParam, type AssetUrlOptions, IMAGE_RESIZE_WIDTHS, getImageSrcSet, getImageDimensions, type ImageSrcSet, type ImageSrcSetOptions, type ImageDimensions, type AspectRatioInput, type AspectRatioPreset, StyleSettings } from "@webiny/website-builder-sdk";
+export type { ComponentProps, ComponentPropsWithChildren, InferManifest, InferComponentChange, InferDescendantChange } from "./types.js";

package/index.js

@@ -1,5 +1,2 @@
 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, StyleSettings } from "@webiny/website-builder-sdk";
-
-//# sourceMappingURL=index.js.map
+export { ASPECT_RATIO_PRESETS, CONTROL_VARIANT_ID, DEFAULT_VISITOR_COOKIE, FORCED_VARIANT_PARAM, IMAGE_RESIZE_WIDTHS, StyleSettings, assignVariant, contentSdk, createBooleanInput, createColorInput, createComponent, createDateInput, createElement, createFileInput, createInput, createLexicalInput, createLongTextInput, createNumberInput, createObjectInput, createRadioInput, createSelectInput, createSlotInput, createTagsInput, createTextInput, createTheme, environment, forcedAssignment, getAnalyticsProvider, getAssetCategory, getAssetCropParam, getAssetUrl, getHeadersProvider, getImageDimensions, getImageSrcSet, getPageWithExperiment, normalizeToAsset, registerAnalyticsProvider, registerComponentGroup, resolveVisitorContext, setHeadersProvider } from "@webiny/website-builder-sdk";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@webiny/website-builder-react",
-	"version": "0.0.0-unstable.06b2ede40f",
-	"main": "index.js",
+	"version": "0.0.0-unstable.0d717d18dd",
+	"type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -17,26 +17,23 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/lexical-editor": "0.0.0-unstable.06b2ede40f",
-		"@webiny/website-builder-sdk": "0.0.0-unstable.06b2ede40f",
+		"@webiny/website-builder-sdk": "0.0.0-unstable.0d717d18dd",
 		"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": "7.0.0",
+		"mobx-react-lite": "5.0.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
-		"@types/react": "18.2.79",
-		"@webiny/project-utils": "0.0.0-unstable.06b2ede40f",
-		"typescript": "5.3.3"
+		"@types/react": "18.3.31",
+		"@webiny/build-tools": "0.0.0-unstable.0d717d18dd",
+		"typescript": "7.0.2",
+		"vitest": "4.1.10"
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "dist"
+		"access": "public"
 	},
-	"scripts": {
-		"build": "node ../cli/bin.js run build",
-		"watch": "node ../cli/bin.js run watch"
-	},
-	"gitHead": "06b2ede40fc2212a70eeafd74afd50b56fb0ce82"
+	"webiny": {
+		"publishFrom": "dist"
+	}
 }

package/types.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { CssProperties, DocumentElement } from "@webiny/website-builder-sdk";
+import type { CssProperties, DocumentElement, ComponentManifestInput, ComponentChangeHandler, DescendantChangeHandler, ExtractInputs } from "@webiny/website-builder-sdk";
+export type { ExtractInputs } from "@webiny/website-builder-sdk";
 export type ComponentProps<TInputs = unknown> = {
     inputs: TInputs;
     styles: CssProperties;
@@ -9,3 +9,39 @@ export type ComponentProps<TInputs = unknown> = {
 export type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<TInputs & {
     children: React.ReactNode;
 }>;
+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

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=types.js.map

package/components/EditingElementRenderer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./EditingElementRenderer.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DocumentRenderer.js\";\nexport * from \"./DocumentFragment.js\";\nexport * from \"./ElementSlot.js\";\nexport * from \"./DocumentStoreProvider.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}

package/createComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createSlotInput","createComponent","component","manifest","acceptsChildren","inputs","name","defaultValue"],"sources":["createComponent.ts"],"sourcesContent":["import type { Component, ComponentManifest } from \"@webiny/website-builder-sdk\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\n\nexport const createComponent = (\n    component: React.ComponentType<any>,\n    manifest: ComponentManifest\n): Component => {\n    const acceptsChildren = manifest.acceptsChildren;\n    if (acceptsChildren) {\n        manifest.inputs = [\n            ...(manifest.inputs ?? []),\n            createSlotInput({\n                name: \"children\",\n                defaultValue: []\n            })\n        ];\n    }\n\n    return {\n        component,\n        manifest\n    };\n};\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,6BAA6B;AAE7D,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,SAAmC,EACnCC,QAA2B,KACf;EACZ,MAAMC,eAAe,GAAGD,QAAQ,CAACC,eAAe;EAChD,IAAIA,eAAe,EAAE;IACjBD,QAAQ,CAACE,MAAM,GAAG,CACd,IAAIF,QAAQ,CAACE,MAAM,IAAI,EAAE,CAAC,EAC1BL,eAAe,CAAC;MACZM,IAAI,EAAE,UAAU;MAChBC,YAAY,EAAE;IAClB,CAAC,CAAC,CACL;EACL;EAEA,OAAO;IACHL,SAAS;IACTC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/index.js.map

@@ -1 +0,0 @@
-{"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    type WebsiteBuilderThemeInput,\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,EAStBC,aAAa,QACV,6BAA6B","ignoreList":[]}

package/types.js.map

@@ -1 +0,0 @@
-{"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":[]}