@webiny/website-builder-sdk 6.4.11 → 6.6.0-alpha.1

package/image/geometry.js

@@ -0,0 +1,112 @@
+const clamp = (value, min = 0, max = 1)=>{
+    if (Number.isNaN(value)) return min;
+    return Math.min(max, Math.max(min, value));
+};
+const round = (n)=>Math.round(1000 * n) / 1000;
+const DEFAULT_CROP = {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+};
+const DEFAULT_FOCAL_POINT = {
+    x: 0.5,
+    y: 0.5
+};
+function resolveAssetImage(override, assetDefault) {
+    return {
+        crop: override?.crop ?? assetDefault?.crop,
+        focalPoint: override?.focalPoint ?? assetDefault?.focalPoint,
+        alt: override?.alt ?? assetDefault?.alt,
+        caption: override?.caption ?? assetDefault?.caption
+    };
+}
+function getCropRect(crop) {
+    const top = clamp(crop?.top ?? DEFAULT_CROP.top);
+    const left = clamp(crop?.left ?? DEFAULT_CROP.left);
+    const bottom = clamp(crop?.bottom ?? DEFAULT_CROP.bottom);
+    const right = clamp(crop?.right ?? DEFAULT_CROP.right);
+    const width = Math.max(0, 1 - left - right);
+    const height = Math.max(0, 1 - top - bottom);
+    return {
+        x: left,
+        y: top,
+        width,
+        height
+    };
+}
+const resolveAspectRatio = (aspectRatio)=>{
+    if ("number" == typeof aspectRatio) return aspectRatio > 0 ? aspectRatio : 1;
+    const { width, height } = aspectRatio;
+    return width > 0 && height > 0 ? width / height : 1;
+};
+const getFocalCenter = (fp)=>({
+        x: clamp(fp?.x ?? DEFAULT_FOCAL_POINT.x),
+        y: clamp(fp?.y ?? DEFAULT_FOCAL_POINT.y)
+    });
+function getVisibleRect(image, aspectRatio) {
+    const cropRect = getCropRect(image.crop);
+    if (void 0 === aspectRatio || cropRect.width <= 0 || cropRect.height <= 0) return cropRect;
+    const iw = (image.width ?? 0) > 0 ? image.width : 1;
+    const ih = (image.height ?? 0) > 0 ? image.height : 1;
+    const targetAR = resolveAspectRatio(aspectRatio);
+    const cropWpx = cropRect.width * iw;
+    const cropHpx = cropRect.height * ih;
+    const cropAR = cropWpx / cropHpx;
+    let finalWpx;
+    let finalHpx;
+    if (targetAR > cropAR) {
+        finalWpx = cropWpx;
+        finalHpx = cropWpx / targetAR;
+    } else {
+        finalHpx = cropHpx;
+        finalWpx = cropHpx * targetAR;
+    }
+    const finalW = finalWpx / iw;
+    const finalH = finalHpx / ih;
+    const center = getFocalCenter(image.focalPoint);
+    const maxX = cropRect.x + cropRect.width - finalW;
+    const maxY = cropRect.y + cropRect.height - finalH;
+    const x = clamp(center.x - finalW / 2, cropRect.x, Math.max(cropRect.x, maxX));
+    const y = clamp(center.y - finalH / 2, cropRect.y, Math.max(cropRect.y, maxY));
+    return {
+        x,
+        y,
+        width: finalW,
+        height: finalH
+    };
+}
+function getImageRenderData(image, aspectRatio) {
+    const rect = getVisibleRect(image, aspectRatio);
+    const center = getFocalCenter(image.focalPoint);
+    const safeW = rect.width > 0 ? rect.width : 1;
+    const safeH = rect.height > 0 ? rect.height : 1;
+    const iw = image.width || 1;
+    const ih = image.height || 1;
+    const boxAspectRatio = void 0 !== aspectRatio ? resolveAspectRatio(aspectRatio) : rect.width * iw / (rect.height * ih);
+    return {
+        rect,
+        objectPosition: `${round(100 * center.x)}% ${round(100 * center.y)}%`,
+        container: {
+            position: "relative",
+            width: "100%",
+            aspectRatio: `${round(boxAspectRatio)}`,
+            overflow: "hidden"
+        },
+        image: {
+            position: "absolute",
+            width: `${round(100 / safeW)}%`,
+            height: `${round(100 / safeH)}%`,
+            left: `${round(100 * -(rect.x / safeW))}%`,
+            top: `${round(100 * -(rect.y / safeH))}%`,
+            maxWidth: "none",
+            objectFit: "cover",
+            objectPosition: `${round(100 * center.x)}% ${round(100 * center.y)}%`
+        },
+        intrinsicWidth: iw,
+        intrinsicHeight: ih
+    };
+}
+export { getCropRect, getImageRenderData, getVisibleRect, resolveAssetImage };
+
+//# sourceMappingURL=geometry.js.map

package/image/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/geometry.js","sources":["../../src/image/geometry.ts"],"sourcesContent":["/**\n * Pure geometry core for crop + focal point rendering.\n *\n * This module is the single source of truth shared by:\n *  - the Admin editor previews (square / 4:3 / 16:9),\n *  - the Next.js render helper (`getImageProps` / `<Image>`),\n *  - and any future URL-transform loader (`?rect=…`).\n *\n * Keeping the math here guarantees that what an editor previews is exactly what\n * a visitor sees. Everything is framework-agnostic and side-effect free.\n */\nimport type { AssetCrop, AssetFocalPoint, AssetImage } from \"@webiny/sdk\";\nimport type { AspectRatioInput } from \"./types.js\";\n\n/** A rectangle in normalized (0..1) coordinates of the original image. */\nexport interface NormalizedRect {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\n/**\n * CSS needed to render an image cropped to a target aspect ratio while honoring\n * both the crop rectangle and the focal point — without any server-side processing.\n *\n * `objectPosition` is the simpler, focal-point-only path (apply to an `object-fit:\n * cover` image). `container` + `image` is the accurate path that also honors the\n * crop rectangle via an overflow-clipped wrapper.\n */\nexport interface ImageRenderData {\n    rect: NormalizedRect;\n    objectPosition: string;\n    container: {\n        position: \"relative\";\n        width: \"100%\";\n        aspectRatio: string;\n        overflow: \"hidden\";\n    };\n    image: {\n        position: \"absolute\";\n        width: string;\n        height: string;\n        left: string;\n        top: string;\n        maxWidth: \"none\";\n        objectFit: \"cover\";\n        objectPosition: string;\n    };\n    intrinsicWidth: number;\n    intrinsicHeight: number;\n}\n\nconst clamp = (value: number, min = 0, max = 1): number => {\n    if (Number.isNaN(value)) {\n        return min;\n    }\n    return Math.min(max, Math.max(min, value));\n};\n\nconst round = (n: number): number => Math.round(n * 1000) / 1000;\n\nconst DEFAULT_CROP: AssetCrop = { top: 0, left: 0, bottom: 0, right: 0 };\nconst DEFAULT_FOCAL_POINT: AssetFocalPoint = { x: 0.5, y: 0.5 };\n\nexport function resolveAssetImage(\n    override?: AssetImage | null,\n    assetDefault?: AssetImage | null\n): AssetImage {\n    return {\n        crop: override?.crop ?? assetDefault?.crop,\n        focalPoint: override?.focalPoint ?? assetDefault?.focalPoint,\n        alt: override?.alt ?? assetDefault?.alt,\n        caption: override?.caption ?? assetDefault?.caption\n    };\n}\n\nexport function getCropRect(crop?: AssetCrop | null): NormalizedRect {\n    const top = clamp(crop?.top ?? DEFAULT_CROP.top);\n    const left = clamp(crop?.left ?? DEFAULT_CROP.left);\n    const bottom = clamp(crop?.bottom ?? DEFAULT_CROP.bottom);\n    const right = clamp(crop?.right ?? DEFAULT_CROP.right);\n\n    const width = Math.max(0, 1 - left - right);\n    const height = Math.max(0, 1 - top - bottom);\n\n    return { x: left, y: top, width, height };\n}\n\nconst resolveAspectRatio = (aspectRatio: AspectRatioInput): number => {\n    if (typeof aspectRatio === \"number\") {\n        return aspectRatio > 0 ? aspectRatio : 1;\n    }\n    const { width, height } = aspectRatio;\n    return width > 0 && height > 0 ? width / height : 1;\n};\n\nconst getFocalCenter = (fp?: AssetFocalPoint | null): { x: number; y: number } => ({\n    x: clamp(fp?.x ?? DEFAULT_FOCAL_POINT.x),\n    y: clamp(fp?.y ?? DEFAULT_FOCAL_POINT.y)\n});\n\nexport function getVisibleRect(image: AssetImage, aspectRatio?: AspectRatioInput): NormalizedRect {\n    const cropRect = getCropRect(image.crop);\n\n    if (aspectRatio === undefined || cropRect.width <= 0 || cropRect.height <= 0) {\n        return cropRect;\n    }\n\n    const iw = (image.width ?? 0) > 0 ? image.width! : 1;\n    const ih = (image.height ?? 0) > 0 ? image.height! : 1;\n    const targetAR = resolveAspectRatio(aspectRatio);\n\n    const cropWpx = cropRect.width * iw;\n    const cropHpx = cropRect.height * ih;\n    const cropAR = cropWpx / cropHpx;\n\n    let finalWpx: number;\n    let finalHpx: number;\n    if (targetAR > cropAR) {\n        finalWpx = cropWpx;\n        finalHpx = cropWpx / targetAR;\n    } else {\n        finalHpx = cropHpx;\n        finalWpx = cropHpx * targetAR;\n    }\n\n    const finalW = finalWpx / iw;\n    const finalH = finalHpx / ih;\n\n    const center = getFocalCenter(image.focalPoint);\n    const maxX = cropRect.x + cropRect.width - finalW;\n    const maxY = cropRect.y + cropRect.height - finalH;\n    const x = clamp(center.x - finalW / 2, cropRect.x, Math.max(cropRect.x, maxX));\n    const y = clamp(center.y - finalH / 2, cropRect.y, Math.max(cropRect.y, maxY));\n\n    return { x, y, width: finalW, height: finalH };\n}\n\nexport function getImageRenderData(\n    image: AssetImage,\n    aspectRatio?: AspectRatioInput\n): ImageRenderData {\n    const rect = getVisibleRect(image, aspectRatio);\n    const center = getFocalCenter(image.focalPoint);\n\n    const safeW = rect.width > 0 ? rect.width : 1;\n    const safeH = rect.height > 0 ? rect.height : 1;\n\n    const iw = image.width || 1;\n    const ih = image.height || 1;\n\n    const boxAspectRatio =\n        aspectRatio !== undefined\n            ? resolveAspectRatio(aspectRatio)\n            : (rect.width * iw) / (rect.height * ih);\n\n    return {\n        rect,\n        objectPosition: `${round(center.x * 100)}% ${round(center.y * 100)}%`,\n        container: {\n            position: \"relative\",\n            width: \"100%\",\n            aspectRatio: `${round(boxAspectRatio)}`,\n            overflow: \"hidden\"\n        },\n        image: {\n            position: \"absolute\",\n            width: `${round(100 / safeW)}%`,\n            height: `${round(100 / safeH)}%`,\n            left: `${round(-(rect.x / safeW) * 100)}%`,\n            top: `${round(-(rect.y / safeH) * 100)}%`,\n            maxWidth: \"none\",\n            objectFit: \"cover\",\n            objectPosition: `${round(center.x * 100)}% ${round(center.y * 100)}%`\n        },\n        intrinsicWidth: iw,\n        intrinsicHeight: ih\n    };\n}\n"],"names":["clamp","value","min","max","Number","Math","round","n","DEFAULT_CROP","DEFAULT_FOCAL_POINT","resolveAssetImage","override","assetDefault","getCropRect","crop","top","left","bottom","right","width","height","resolveAspectRatio","aspectRatio","getFocalCenter","fp","getVisibleRect","image","cropRect","undefined","iw","ih","targetAR","cropWpx","cropHpx","cropAR","finalWpx","finalHpx","finalW","finalH","center","maxX","maxY","x","y","getImageRenderData","rect","safeW","safeH","boxAspectRatio"],"mappings":"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"}

package/image/geometry.test.d.ts

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

package/image/geometry.test.js

@@ -0,0 +1,190 @@
+import { describe, expect, it } from "vitest";
+import { getCropRect, getImageRenderData, getVisibleRect, resolveAssetImage } from "./geometry.js";
+const geometry_test_image = (overrides)=>({
+        width: 1000,
+        height: 1000,
+        ...overrides
+    });
+describe("resolveAssetImage", ()=>{
+    it("prefers the override per property, falling back to the asset default", ()=>{
+        const assetDefault = {
+            crop: {
+                top: 0.1,
+                left: 0.1,
+                bottom: 0.1,
+                right: 0.1
+            },
+            focalPoint: {
+                x: 0.2,
+                y: 0.2
+            },
+            alt: "default alt",
+            caption: "default caption"
+        };
+        const override = {
+            focalPoint: {
+                x: 0.8,
+                y: 0.8
+            },
+            alt: "override alt"
+        };
+        const result = resolveAssetImage(override, assetDefault);
+        expect(result.crop).toEqual(assetDefault.crop);
+        expect(result.caption).toBe("default caption");
+        expect(result.focalPoint).toEqual(override.focalPoint);
+        expect(result.alt).toBe("override alt");
+    });
+    it("handles null/undefined inputs", ()=>{
+        expect(resolveAssetImage(null, null)).toEqual({
+            crop: void 0,
+            focalPoint: void 0,
+            alt: void 0,
+            caption: void 0
+        });
+    });
+});
+describe("getCropRect", ()=>{
+    it("returns the full image when no crop is set", ()=>{
+        expect(getCropRect()).toEqual({
+            x: 0,
+            y: 0,
+            width: 1,
+            height: 1
+        });
+    });
+    it("converts edge insets into a rectangle", ()=>{
+        const rect = getCropRect({
+            top: 0.1,
+            left: 0.2,
+            bottom: 0.3,
+            right: 0.05
+        });
+        expect(rect.x).toBeCloseTo(0.2, 10);
+        expect(rect.y).toBeCloseTo(0.1, 10);
+        expect(rect.width).toBeCloseTo(0.75, 10);
+        expect(rect.height).toBeCloseTo(0.6, 10);
+    });
+    it("does not produce negative dimensions when insets overlap", ()=>{
+        const rect = getCropRect({
+            top: 0.7,
+            left: 0.7,
+            bottom: 0.7,
+            right: 0.7
+        });
+        expect(rect.width).toBe(0);
+        expect(rect.height).toBe(0);
+    });
+    it("clamps out-of-range values", ()=>{
+        const rect = getCropRect({
+            top: -1,
+            left: 2,
+            bottom: 0,
+            right: 0
+        });
+        expect(rect.x).toBe(1);
+        expect(rect.y).toBe(0);
+    });
+});
+describe("getVisibleRect", ()=>{
+    it("returns the crop rect when no aspect ratio is requested", ()=>{
+        const rect = getVisibleRect(geometry_test_image({
+            crop: {
+                top: 0.1,
+                left: 0.1,
+                bottom: 0.1,
+                right: 0.1
+            }
+        }));
+        expect(rect).toEqual({
+            x: 0.1,
+            y: 0.1,
+            width: 0.8,
+            height: 0.8
+        });
+    });
+    it("fits a 16:9 rect inside a square image, centered by default", ()=>{
+        const rect = getVisibleRect(geometry_test_image(), 16 / 9);
+        expect(rect.width).toBeCloseTo(1, 5);
+        expect(rect.height).toBeCloseTo(0.5625, 5);
+        expect(rect.y).toBeCloseTo(0.21875, 5);
+        expect(rect.x).toBeCloseTo(0, 5);
+    });
+    it("shifts the visible rect toward the focal point and clamps to bounds", ()=>{
+        const rect = getVisibleRect(geometry_test_image({
+            focalPoint: {
+                x: 0.5,
+                y: 0.05
+            }
+        }), 16 / 9);
+        expect(rect.y).toBeCloseTo(0, 5);
+    });
+    it("keeps the visible rect within the crop rectangle", ()=>{
+        const rect = getVisibleRect(geometry_test_image({
+            crop: {
+                top: 0.25,
+                left: 0,
+                bottom: 0.25,
+                right: 0
+            },
+            focalPoint: {
+                x: 0.5,
+                y: 0.9
+            }
+        }), 1);
+        expect(rect.y).toBeGreaterThanOrEqual(0.25 - 1e-9);
+        expect(rect.y + rect.height).toBeLessThanOrEqual(0.75 + 1e-9);
+    });
+    it("accepts an explicit width/height aspect ratio", ()=>{
+        const byObject = getVisibleRect(geometry_test_image(), {
+            width: 16,
+            height: 9
+        });
+        const byNumber = getVisibleRect(geometry_test_image(), 16 / 9);
+        expect(byObject).toEqual(byNumber);
+    });
+});
+describe("getImageRenderData", ()=>{
+    it("derives objectPosition from the focal point", ()=>{
+        const data = getImageRenderData(geometry_test_image({
+            focalPoint: {
+                x: 0.25,
+                y: 0.75
+            }
+        }), 1);
+        expect(data.objectPosition).toBe("25% 75%");
+    });
+    it("produces an overflow-hidden container with the requested aspect ratio", ()=>{
+        const data = getImageRenderData(geometry_test_image(), 16 / 9);
+        expect(data.container.overflow).toBe("hidden");
+        expect(data.container.aspectRatio).toBe(`${Math.round(16 / 9 * 1000) / 1000}`);
+    });
+    it("scales and offsets the image so the visible rect fills the container", ()=>{
+        const data = getImageRenderData(geometry_test_image(), 16 / 9);
+        expect(data.image.width).toBe("100%");
+        expect(data.image.height).toBe(`${Math.round(100 / 0.5625 * 1000) / 1000}%`);
+        expect(parseFloat(data.image.left)).toBe(0);
+        expect(parseFloat(data.image.top)).toBeLessThan(0);
+    });
+    it("stays finite for a degenerate (collapsed) crop", ()=>{
+        const data = getImageRenderData(geometry_test_image({
+            crop: {
+                top: 0.7,
+                left: 0.7,
+                bottom: 0.7,
+                right: 0.7
+            }
+        }), 1);
+        expect(Number.isFinite(parseFloat(data.image.width))).toBe(true);
+        expect(Number.isFinite(parseFloat(data.image.height))).toBe(true);
+    });
+    it("passes through intrinsic dimensions", ()=>{
+        const data = getImageRenderData(geometry_test_image({
+            width: 1920,
+            height: 1080
+        }), 16 / 9);
+        expect(data.intrinsicWidth).toBe(1920);
+        expect(data.intrinsicHeight).toBe(1080);
+    });
+});
+
+//# sourceMappingURL=geometry.test.js.map

package/image/geometry.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/geometry.test.js","sources":["../../src/image/geometry.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { getCropRect, getImageRenderData, getVisibleRect, resolveAssetImage } from \"./geometry.js\";\nimport type { AssetImage } from \"@webiny/sdk\";\n\nconst image = (overrides?: Partial<AssetImage>): AssetImage => ({\n    width: 1000,\n    height: 1000,\n    ...overrides\n});\n\ndescribe(\"resolveAssetImage\", () => {\n    it(\"prefers the override per property, falling back to the asset default\", () => {\n        const assetDefault: AssetImage = {\n            crop: { top: 0.1, left: 0.1, bottom: 0.1, right: 0.1 },\n            focalPoint: { x: 0.2, y: 0.2 },\n            alt: \"default alt\",\n            caption: \"default caption\"\n        };\n        const override: AssetImage = {\n            focalPoint: { x: 0.8, y: 0.8 },\n            alt: \"override alt\"\n        };\n\n        const result = resolveAssetImage(override, assetDefault);\n\n        expect(result.crop).toEqual(assetDefault.crop);\n        expect(result.caption).toBe(\"default caption\");\n        expect(result.focalPoint).toEqual(override.focalPoint);\n        expect(result.alt).toBe(\"override alt\");\n    });\n\n    it(\"handles null/undefined inputs\", () => {\n        expect(resolveAssetImage(null, null)).toEqual({\n            crop: undefined,\n            focalPoint: undefined,\n            alt: undefined,\n            caption: undefined\n        });\n    });\n});\n\ndescribe(\"getCropRect\", () => {\n    it(\"returns the full image when no crop is set\", () => {\n        expect(getCropRect()).toEqual({ x: 0, y: 0, width: 1, height: 1 });\n    });\n\n    it(\"converts edge insets into a rectangle\", () => {\n        const rect = getCropRect({ top: 0.1, left: 0.2, bottom: 0.3, right: 0.05 });\n        expect(rect.x).toBeCloseTo(0.2, 10);\n        expect(rect.y).toBeCloseTo(0.1, 10);\n        expect(rect.width).toBeCloseTo(0.75, 10);\n        expect(rect.height).toBeCloseTo(0.6, 10);\n    });\n\n    it(\"does not produce negative dimensions when insets overlap\", () => {\n        const rect = getCropRect({ top: 0.7, left: 0.7, bottom: 0.7, right: 0.7 });\n        expect(rect.width).toBe(0);\n        expect(rect.height).toBe(0);\n    });\n\n    it(\"clamps out-of-range values\", () => {\n        const rect = getCropRect({ top: -1, left: 2, bottom: 0, right: 0 });\n        expect(rect.x).toBe(1);\n        expect(rect.y).toBe(0);\n    });\n});\n\ndescribe(\"getVisibleRect\", () => {\n    it(\"returns the crop rect when no aspect ratio is requested\", () => {\n        const rect = getVisibleRect(\n            image({ crop: { top: 0.1, left: 0.1, bottom: 0.1, right: 0.1 } })\n        );\n        expect(rect).toEqual({ x: 0.1, y: 0.1, width: 0.8, height: 0.8 });\n    });\n\n    it(\"fits a 16:9 rect inside a square image, centered by default\", () => {\n        const rect = getVisibleRect(image(), 16 / 9);\n        expect(rect.width).toBeCloseTo(1, 5);\n        expect(rect.height).toBeCloseTo(0.5625, 5);\n        expect(rect.y).toBeCloseTo((1 - 0.5625) / 2, 5);\n        expect(rect.x).toBeCloseTo(0, 5);\n    });\n\n    it(\"shifts the visible rect toward the focal point and clamps to bounds\", () => {\n        const rect = getVisibleRect(image({ focalPoint: { x: 0.5, y: 0.05 } }), 16 / 9);\n        expect(rect.y).toBeCloseTo(0, 5);\n    });\n\n    it(\"keeps the visible rect within the crop rectangle\", () => {\n        const rect = getVisibleRect(\n            image({\n                crop: { top: 0.25, left: 0, bottom: 0.25, right: 0 },\n                focalPoint: { x: 0.5, y: 0.9 }\n            }),\n            1\n        );\n        expect(rect.y).toBeGreaterThanOrEqual(0.25 - 1e-9);\n        expect(rect.y + rect.height).toBeLessThanOrEqual(0.75 + 1e-9);\n    });\n\n    it(\"accepts an explicit width/height aspect ratio\", () => {\n        const byObject = getVisibleRect(image(), { width: 16, height: 9 });\n        const byNumber = getVisibleRect(image(), 16 / 9);\n        expect(byObject).toEqual(byNumber);\n    });\n});\n\ndescribe(\"getImageRenderData\", () => {\n    it(\"derives objectPosition from the focal point\", () => {\n        const data = getImageRenderData(image({ focalPoint: { x: 0.25, y: 0.75 } }), 1);\n        expect(data.objectPosition).toBe(\"25% 75%\");\n    });\n\n    it(\"produces an overflow-hidden container with the requested aspect ratio\", () => {\n        const data = getImageRenderData(image(), 16 / 9);\n        expect(data.container.overflow).toBe(\"hidden\");\n        expect(data.container.aspectRatio).toBe(`${Math.round((16 / 9) * 1000) / 1000}`);\n    });\n\n    it(\"scales and offsets the image so the visible rect fills the container\", () => {\n        const data = getImageRenderData(image(), 16 / 9);\n        expect(data.image.width).toBe(\"100%\");\n        expect(data.image.height).toBe(`${Math.round((100 / 0.5625) * 1000) / 1000}%`);\n        expect(parseFloat(data.image.left)).toBe(0);\n        expect(parseFloat(data.image.top)).toBeLessThan(0);\n    });\n\n    it(\"stays finite for a degenerate (collapsed) crop\", () => {\n        const data = getImageRenderData(\n            image({ crop: { top: 0.7, left: 0.7, bottom: 0.7, right: 0.7 } }),\n            1\n        );\n        expect(Number.isFinite(parseFloat(data.image.width))).toBe(true);\n        expect(Number.isFinite(parseFloat(data.image.height))).toBe(true);\n    });\n\n    it(\"passes through intrinsic dimensions\", () => {\n        const data = getImageRenderData(image({ width: 1920, height: 1080 }), 16 / 9);\n        expect(data.intrinsicWidth).toBe(1920);\n        expect(data.intrinsicHeight).toBe(1080);\n    });\n});\n"],"names":["image","overrides","describe","it","assetDefault","override","result","resolveAssetImage","expect","undefined","getCropRect","rect","getVisibleRect","byObject","byNumber","data","getImageRenderData","Math","parseFloat","Number"],"mappings":"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"}

package/image/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export * from "./presets.js";
+export * from "./geometry.js";

package/image/index.js

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export * from "./presets.js";
+export * from "./geometry.js";

package/image/presets.d.ts

@@ -0,0 +1,6 @@
+import type { AspectRatioPreset } from "./types.js";
+/**
+ * Default aspect ratios shown in the image editor's preview strip.
+ * A later phase will let a field lock to one of these (or a custom ratio).
+ */
+export declare const ASPECT_RATIO_PRESETS: AspectRatioPreset[];

package/image/presets.js

@@ -0,0 +1,20 @@
+const ASPECT_RATIO_PRESETS = [
+    {
+        id: "square",
+        label: "Square",
+        ratio: 1
+    },
+    {
+        id: "4:3",
+        label: "4:3",
+        ratio: 4 / 3
+    },
+    {
+        id: "16:9",
+        label: "16:9",
+        ratio: 16 / 9
+    }
+];
+export { ASPECT_RATIO_PRESETS };
+
+//# sourceMappingURL=presets.js.map

package/image/presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/presets.js","sources":["../../src/image/presets.ts"],"sourcesContent":["import type { AspectRatioPreset } from \"./types.js\";\n\n/**\n * Default aspect ratios shown in the image editor's preview strip.\n * A later phase will let a field lock to one of these (or a custom ratio).\n */\nexport const ASPECT_RATIO_PRESETS: AspectRatioPreset[] = [\n    { id: \"square\", label: \"Square\", ratio: 1 },\n    { id: \"4:3\", label: \"4:3\", ratio: 4 / 3 },\n    { id: \"16:9\", label: \"16:9\", ratio: 16 / 9 }\n];\n"],"names":["ASPECT_RATIO_PRESETS"],"mappings":"AAMO,MAAMA,uBAA4C;IACrD;QAAE,IAAI;QAAU,OAAO;QAAU,OAAO;IAAE;IAC1C;QAAE,IAAI;QAAO,OAAO;QAAO,OAAO,IAAI;IAAE;IACxC;QAAE,IAAI;QAAQ,OAAO;QAAQ,OAAO,KAAK;IAAE;CAC9C"}

package/image/types.d.ts

@@ -0,0 +1,10 @@
+export type { AssetCrop, AssetFocalPoint } from "@webiny/sdk";
+export type AspectRatioInput = number | {
+    width: number;
+    height: number;
+};
+export interface AspectRatioPreset {
+    id: string;
+    label: string;
+    ratio: number;
+}

package/index.d.ts

@@ -8,6 +8,9 @@ export * from "./DocumentStore.js";
 export * from "./Logger.js";
 export * from "./FunctionConverter.js";
 export * from "./createInput.js";
+export * from "./createComponent.js";
+export * from "./image/index.js";
+export * from "./asset/index.js";
 export * from "./MouseTracker.js";
 export * from "./ViewportManager.js";
 export * from "./messenger/Messenger.js";
@@ -21,6 +24,7 @@ export * from "./createElement.js";
 export * from "./registerComponentGroup.js";
 export * from "./jsonPatch.js";
 export * from "./headersProvider.js";
+export * from "./experiments/index.js";
 export * from "./ComponentManifestToAstConverter.js";
 export * from "./findMatchingAstNode.js";
 export * from "./InheritanceProcessor.js";

package/index.js

@@ -8,6 +8,9 @@ export * from "./DocumentStore.js";
 export * from "./Logger.js";
 export * from "./FunctionConverter.js";
 export * from "./createInput.js";
+export * from "./createComponent.js";
+export * from "./image/index.js";
+export * from "./asset/index.js";
 export * from "./MouseTracker.js";
 export * from "./ViewportManager.js";
 export * from "./messenger/Messenger.js";
@@ -20,6 +23,7 @@ export * from "./createElement.js";
 export * from "./registerComponentGroup.js";
 export * from "./jsonPatch.js";
 export * from "./headersProvider.js";
+export * from "./experiments/index.js";
 export * from "./ComponentManifestToAstConverter.js";
 export * from "./findMatchingAstNode.js";
 export * from "./InheritanceProcessor.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/website-builder-sdk",
-	"version": "6.4.11",
+	"version": "6.6.0-alpha.1",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -12,6 +12,7 @@
 	"author": "Pavel Denisjuk",
 	"license": "MIT",
 	"dependencies": {
+		"@webiny/sdk": "6.6.0-alpha.1",
 		"csstype": "3.2.3",
 		"deep-equal": "2.2.3",
 		"deepmerge": "4.3.1",
@@ -20,8 +21,8 @@
 		"is-hotkey": "0.2.0",
 		"lodash": "4.18.1",
 		"matcher": "6.0.0",
-		"mobx": "6.16.1",
-		"nanoid": "5.1.16",
+		"mobx": "7.0.3",
+		"nanoid": "6.0.1",
 		"nanoid-dictionary": "5.0.0",
 		"pino": "10.3.1",
 		"pino-pretty": "13.1.3"
@@ -29,9 +30,9 @@
 	"devDependencies": {
 		"@types/deep-equal": "1.0.4",
 		"@types/is-hotkey": "0.1.10",
-		"@webiny/build-tools": "6.4.11",
-		"typescript": "6.0.3",
-		"vitest": "4.1.10"
+		"@webiny/build-tools": "6.6.0-alpha.1",
+		"typescript": "7.0.2",
+		"vitest": "4.1.11"
 	},
 	"publishConfig": {
 		"access": "public"

package/types.d.ts

@@ -3,6 +3,7 @@ import type { BindingsApi } from "./BindingsApi.js";
 import type { ShorthandCssProperties } from "./types/ShorthandCssProperties.js";
 import type { InputFactory } from "./createInput.js";
 import type { Breakpoint } from "./types/WebsiteBuilderTheme.js";
+import type { ActiveExperiment, VariantContent } from "./experiments/types.js";
 export type { WebsiteBuilderTheme, Breakpoint } from "./types/WebsiteBuilderTheme.js";
 type CSSProperties = CSS.Properties<string | number>;
 export type ElementMap = Record<string, DocumentElement>;
@@ -198,6 +199,7 @@ export type ComponentManifest = {
     hideFromToolbar?: boolean;
     hideStyleSettings?: string[];
     autoApplyStyles?: boolean;
+    applyDefaultStyles?: boolean;
     tags: string[];
     constraints?: ComponentConstraint[];
     descendantConstraints?: ComponentConstraint[];
@@ -373,6 +375,9 @@ export interface IDataProvider {
     getPageByPath(path: string, options?: GetPageOptions): Promise<PublicPage | null>;
     getPageById(id: string, options?: GetPageOptions): Promise<PublicPage | null>;
     listPages(options?: ListPagesOptions): Promise<ListPagesResult>;
+    getPageExperiment(path: string): Promise<ActiveExperiment | null>;
+    getVariantContent(variantId: string): Promise<VariantContent | null>;
+    getExperimentPaused(experimentId: string): Promise<boolean>;
 }
 export interface IEnvironment {
     isClient(): boolean;