@webiny/website-builder-sdk 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/asset/deliveryUrl.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Build asset **delivery URLs** that frame the image server-side. The delivery
+ * pipeline applies the crop (`?crop`), an optional target aspect ratio + focal point
+ * (`?aspectRatio`, `?focal`), resizing (`?width`), and format (`?format`) — so the
+ * returned URL's pixels are already framed. Use with any renderer that loads a URL:
+ * `next/image`, a plain `<img>`, Angular, React Native, Open Graph tags, email, etc.
+ * Each distinct framing yields its own cacheable URL.
+ */
+import type { Asset } from "./types.js";
+export interface AssetUrlOptions {
+    /** Delivery width (snapped to the configured width ladder server-side). */
+    width?: number;
+    /** Output format, e.g. `"auto"` (negotiated via Accept), `"webp"`, `"avif"`. */
+    format?: string;
+    /** Encoder quality (1–100). */
+    quality?: number;
+    /** Include the per-usage crop (`image.crop`) as a server-side crop. Default `true`. */
+    crop?: boolean;
+    /**
+     * Frame to a target aspect ratio server-side (`"16:9"` or a `w/h` number),
+     * centered on the asset's focal point. Omit to deliver at the crop's own ratio.
+     */
+    aspectRatio?: number | string;
+    /**
+     * Include the asset's focal point (`image.focalPoint`) when `aspectRatio` is set.
+     * Default `true`.
+     */
+    focal?: boolean;
+}
+/**
+ * The `crop=top,left,bottom,right` query value for an asset's per-usage crop, or
+ * `undefined` when there is no crop (or a full-image, no-op crop).
+ */
+export declare const getAssetCropParam: (asset: Pick<Asset, "image"> | null | undefined) => string | undefined;
+/**
+ * Build a delivery URL for an asset, baking the per-usage crop into the delivered
+ * image (plus optional width/format/quality). Returns `""` for a missing asset.
+ */
+export declare const getAssetUrl: (asset: (Pick<Asset, "src" | "image"> & {
+    src?: string;
+}) | null | undefined, options?: AssetUrlOptions) => string;

package/asset/deliveryUrl.js

@@ -0,0 +1,34 @@
+const round = (n)=>Math.round(10000 * n) / 10000;
+const getAssetCropParam = (asset)=>{
+    const c = asset?.image?.crop;
+    if (!c || 0 === c.top && 0 === c.left && 0 === c.bottom && 0 === c.right) return;
+    return [
+        c.top,
+        c.left,
+        c.bottom,
+        c.right
+    ].map(round).join(",");
+};
+const getAssetUrl = (asset, options = {})=>{
+    const src = asset?.src;
+    if (!src) return "";
+    const params = [];
+    if (false !== options.crop) {
+        const crop = getAssetCropParam(asset);
+        if (crop) params.push(`crop=${crop}`);
+    }
+    if (void 0 !== options.aspectRatio) {
+        params.push(`aspectRatio=${options.aspectRatio}`);
+        const fp = asset?.image?.focalPoint;
+        if (false !== options.focal && fp && !(0.5 === fp.x && 0.5 === fp.y)) params.push(`focal=${round(fp.x)},${round(fp.y)}`);
+    }
+    if (options.width) params.push(`width=${options.width}`);
+    if (options.format) params.push(`format=${options.format}`);
+    if (options.quality) params.push(`quality=${options.quality}`);
+    if (0 === params.length) return src;
+    const separator = src.includes("?") ? "&" : "?";
+    return `${src}${separator}${params.join("&")}`;
+};
+export { getAssetCropParam, getAssetUrl };
+
+//# sourceMappingURL=deliveryUrl.js.map

package/asset/deliveryUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset/deliveryUrl.js","sources":["../../src/asset/deliveryUrl.ts"],"sourcesContent":["/**\n * Build asset **delivery URLs** that frame the image server-side. The delivery\n * pipeline applies the crop (`?crop`), an optional target aspect ratio + focal point\n * (`?aspectRatio`, `?focal`), resizing (`?width`), and format (`?format`) — so the\n * returned URL's pixels are already framed. Use with any renderer that loads a URL:\n * `next/image`, a plain `<img>`, Angular, React Native, Open Graph tags, email, etc.\n * Each distinct framing yields its own cacheable URL.\n */\nimport type { Asset } from \"./types.js\";\n\nexport interface AssetUrlOptions {\n    /** Delivery width (snapped to the configured width ladder server-side). */\n    width?: number;\n    /** Output format, e.g. `\"auto\"` (negotiated via Accept), `\"webp\"`, `\"avif\"`. */\n    format?: string;\n    /** Encoder quality (1–100). */\n    quality?: number;\n    /** Include the per-usage crop (`image.crop`) as a server-side crop. Default `true`. */\n    crop?: boolean;\n    /**\n     * Frame to a target aspect ratio server-side (`\"16:9\"` or a `w/h` number),\n     * centered on the asset's focal point. Omit to deliver at the crop's own ratio.\n     */\n    aspectRatio?: number | string;\n    /**\n     * Include the asset's focal point (`image.focalPoint`) when `aspectRatio` is set.\n     * Default `true`.\n     */\n    focal?: boolean;\n}\n\nconst round = (n: number): number => Math.round(n * 10000) / 10000;\n\n/**\n * The `crop=top,left,bottom,right` query value for an asset's per-usage crop, or\n * `undefined` when there is no crop (or a full-image, no-op crop).\n */\nexport const getAssetCropParam = (\n    asset: Pick<Asset, \"image\"> | null | undefined\n): string | undefined => {\n    const c = asset?.image?.crop;\n    if (!c || (c.top === 0 && c.left === 0 && c.bottom === 0 && c.right === 0)) {\n        return undefined;\n    }\n    return [c.top, c.left, c.bottom, c.right].map(round).join(\",\");\n};\n\n/**\n * Build a delivery URL for an asset, baking the per-usage crop into the delivered\n * image (plus optional width/format/quality). Returns `\"\"` for a missing asset.\n */\nexport const getAssetUrl = (\n    asset: (Pick<Asset, \"src\" | \"image\"> & { src?: string }) | null | undefined,\n    options: AssetUrlOptions = {}\n): string => {\n    const src = asset?.src;\n    if (!src) {\n        return \"\";\n    }\n\n    const params: string[] = [];\n    if (options.crop !== false) {\n        const crop = getAssetCropParam(asset);\n        if (crop) {\n            params.push(`crop=${crop}`);\n        }\n    }\n    if (options.aspectRatio !== undefined) {\n        params.push(`aspectRatio=${options.aspectRatio}`);\n        const fp = asset?.image?.focalPoint;\n        if (options.focal !== false && fp && !(fp.x === 0.5 && fp.y === 0.5)) {\n            params.push(`focal=${round(fp.x)},${round(fp.y)}`);\n        }\n    }\n    if (options.width) {\n        params.push(`width=${options.width}`);\n    }\n    if (options.format) {\n        params.push(`format=${options.format}`);\n    }\n    if (options.quality) {\n        params.push(`quality=${options.quality}`);\n    }\n\n    if (params.length === 0) {\n        return src;\n    }\n    const separator = src.includes(\"?\") ? \"&\" : \"?\";\n    return `${src}${separator}${params.join(\"&\")}`;\n};\n"],"names":["round","n","Math","getAssetCropParam","asset","c","getAssetUrl","options","src","params","crop","undefined","fp","separator"],"mappings":"AA+BA,MAAMA,QAAQ,CAACC,IAAsBC,KAAK,KAAK,CAACD,AAAI,QAAJA,KAAa;AAMtD,MAAME,oBAAoB,CAC7BC;IAEA,MAAMC,IAAID,OAAO,OAAO;IACxB,IAAI,CAACC,KAAMA,AAAU,MAAVA,EAAE,GAAG,IAAUA,AAAW,MAAXA,EAAE,IAAI,IAAUA,AAAa,MAAbA,EAAE,MAAM,IAAUA,AAAY,MAAZA,EAAE,KAAK,EAC/D;IAEJ,OAAO;QAACA,EAAE,GAAG;QAAEA,EAAE,IAAI;QAAEA,EAAE,MAAM;QAAEA,EAAE,KAAK;KAAC,CAAC,GAAG,CAACL,OAAO,IAAI,CAAC;AAC9D;AAMO,MAAMM,cAAc,CACvBF,OACAG,UAA2B,CAAC,CAAC;IAE7B,MAAMC,MAAMJ,OAAO;IACnB,IAAI,CAACI,KACD,OAAO;IAGX,MAAMC,SAAmB,EAAE;IAC3B,IAAIF,AAAiB,UAAjBA,QAAQ,IAAI,EAAY;QACxB,MAAMG,OAAOP,kBAAkBC;QAC/B,IAAIM,MACAD,OAAO,IAAI,CAAC,CAAC,KAAK,EAAEC,MAAM;IAElC;IACA,IAAIH,AAAwBI,WAAxBJ,QAAQ,WAAW,EAAgB;QACnCE,OAAO,IAAI,CAAC,CAAC,YAAY,EAAEF,QAAQ,WAAW,EAAE;QAChD,MAAMK,KAAKR,OAAO,OAAO;QACzB,IAAIG,AAAkB,UAAlBA,QAAQ,KAAK,IAAcK,MAAM,CAAEA,CAAAA,AAAS,QAATA,GAAG,CAAC,IAAYA,AAAS,QAATA,GAAG,CAAC,AAAO,GAC9DH,OAAO,IAAI,CAAC,CAAC,MAAM,EAAET,MAAMY,GAAG,CAAC,EAAE,CAAC,EAAEZ,MAAMY,GAAG,CAAC,GAAG;IAEzD;IACA,IAAIL,QAAQ,KAAK,EACbE,OAAO,IAAI,CAAC,CAAC,MAAM,EAAEF,QAAQ,KAAK,EAAE;IAExC,IAAIA,QAAQ,MAAM,EACdE,OAAO,IAAI,CAAC,CAAC,OAAO,EAAEF,QAAQ,MAAM,EAAE;IAE1C,IAAIA,QAAQ,OAAO,EACfE,OAAO,IAAI,CAAC,CAAC,QAAQ,EAAEF,QAAQ,OAAO,EAAE;IAG5C,IAAIE,AAAkB,MAAlBA,OAAO,MAAM,EACb,OAAOD;IAEX,MAAMK,YAAYL,IAAI,QAAQ,CAAC,OAAO,MAAM;IAC5C,OAAO,GAAGA,MAAMK,YAAYJ,OAAO,IAAI,CAAC,MAAM;AAClD"}

package/asset/deliveryUrl.test.d.ts

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

package/asset/deliveryUrl.test.js

@@ -0,0 +1,127 @@
+import { describe, expect, it } from "vitest";
+import { getAssetCropParam, getAssetUrl } from "./deliveryUrl.js";
+const asset = (crop)=>({
+        id: "f",
+        src: "https://cdn/x/pic.jpg",
+        name: "pic.jpg",
+        mimeType: "image/jpeg",
+        size: 1,
+        image: {
+            width: 800,
+            height: 600,
+            ...crop ? {
+                crop
+            } : {}
+        }
+    });
+describe("getAssetCropParam", ()=>{
+    it("serializes a crop as top,left,bottom,right", ()=>{
+        expect(getAssetCropParam(asset({
+            top: 0.1,
+            left: 0.2,
+            bottom: 0.1,
+            right: 0.05
+        }))).toBe("0.1,0.2,0.1,0.05");
+    });
+    it("is undefined for no crop or a full crop", ()=>{
+        expect(getAssetCropParam(asset())).toBeUndefined();
+        expect(getAssetCropParam(asset({
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0
+        }))).toBeUndefined();
+        expect(getAssetCropParam(null)).toBeUndefined();
+    });
+});
+describe("getAssetUrl", ()=>{
+    it("bakes the crop + width + format into the URL", ()=>{
+        const url = getAssetUrl(asset({
+            top: 0.1,
+            left: 0.2,
+            bottom: 0.1,
+            right: 0.05
+        }), {
+            width: 1200,
+            format: "auto"
+        });
+        expect(url).toBe("https://cdn/x/pic.jpg?crop=0.1,0.2,0.1,0.05&width=1200&format=auto");
+    });
+    it("omits the crop when there is none", ()=>{
+        expect(getAssetUrl(asset(), {
+            width: 640
+        })).toBe("https://cdn/x/pic.jpg?width=640");
+    });
+    it("can opt out of the crop", ()=>{
+        expect(getAssetUrl(asset({
+            top: 0.1,
+            left: 0,
+            bottom: 0,
+            right: 0
+        }), {
+            crop: false
+        })).toBe("https://cdn/x/pic.jpg");
+    });
+    it("returns the bare src when no options apply", ()=>{
+        expect(getAssetUrl(asset())).toBe("https://cdn/x/pic.jpg");
+    });
+    it("uses & when the src already has a query string", ()=>{
+        const url = getAssetUrl({
+            src: "https://cdn/x/pic.jpg?v=2",
+            image: {}
+        }, {
+            width: 640
+        });
+        expect(url).toBe("https://cdn/x/pic.jpg?v=2&width=640");
+    });
+    it("returns empty string for a missing asset", ()=>{
+        expect(getAssetUrl(null)).toBe("");
+        expect(getAssetUrl(void 0)).toBe("");
+    });
+    it("emits aspectRatio + focal (from the asset) when framing to a ratio", ()=>{
+        const a = {
+            ...asset(),
+            image: {
+                width: 800,
+                height: 600,
+                focalPoint: {
+                    x: 0.7,
+                    y: 0.4
+                }
+            }
+        };
+        expect(getAssetUrl(a, {
+            aspectRatio: "16:9",
+            width: 1200
+        })).toBe("https://cdn/x/pic.jpg?aspectRatio=16:9&focal=0.7,0.4&width=1200");
+    });
+    it("omits focal when it is centered or opted out", ()=>{
+        const centered = {
+            ...asset(),
+            image: {
+                focalPoint: {
+                    x: 0.5,
+                    y: 0.5
+                }
+            }
+        };
+        expect(getAssetUrl(centered, {
+            aspectRatio: 1
+        })).toBe("https://cdn/x/pic.jpg?aspectRatio=1");
+        const offCenter = {
+            ...asset(),
+            image: {
+                focalPoint: {
+                    x: 0.7,
+                    y: 0.4
+                }
+            }
+        };
+        expect(getAssetUrl(offCenter, {
+            aspectRatio: 1,
+            focal: false
+        })).toBe("https://cdn/x/pic.jpg?aspectRatio=1");
+    });
+});
+
+//# sourceMappingURL=deliveryUrl.test.js.map

package/asset/deliveryUrl.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset/deliveryUrl.test.js","sources":["../../src/asset/deliveryUrl.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { getAssetCropParam, getAssetUrl } from \"./deliveryUrl.js\";\n\nconst asset = (crop?: any) => ({\n    id: \"f\",\n    src: \"https://cdn/x/pic.jpg\",\n    name: \"pic.jpg\",\n    mimeType: \"image/jpeg\",\n    size: 1,\n    image: { width: 800, height: 600, ...(crop ? { crop } : {}) }\n});\n\ndescribe(\"getAssetCropParam\", () => {\n    it(\"serializes a crop as top,left,bottom,right\", () => {\n        expect(getAssetCropParam(asset({ top: 0.1, left: 0.2, bottom: 0.1, right: 0.05 }))).toBe(\n            \"0.1,0.2,0.1,0.05\"\n        );\n    });\n\n    it(\"is undefined for no crop or a full crop\", () => {\n        expect(getAssetCropParam(asset())).toBeUndefined();\n        expect(getAssetCropParam(asset({ top: 0, left: 0, bottom: 0, right: 0 }))).toBeUndefined();\n        expect(getAssetCropParam(null)).toBeUndefined();\n    });\n});\n\ndescribe(\"getAssetUrl\", () => {\n    it(\"bakes the crop + width + format into the URL\", () => {\n        const url = getAssetUrl(asset({ top: 0.1, left: 0.2, bottom: 0.1, right: 0.05 }), {\n            width: 1200,\n            format: \"auto\"\n        });\n        expect(url).toBe(\"https://cdn/x/pic.jpg?crop=0.1,0.2,0.1,0.05&width=1200&format=auto\");\n    });\n\n    it(\"omits the crop when there is none\", () => {\n        expect(getAssetUrl(asset(), { width: 640 })).toBe(\"https://cdn/x/pic.jpg?width=640\");\n    });\n\n    it(\"can opt out of the crop\", () => {\n        expect(\n            getAssetUrl(asset({ top: 0.1, left: 0, bottom: 0, right: 0 }), { crop: false })\n        ).toBe(\"https://cdn/x/pic.jpg\");\n    });\n\n    it(\"returns the bare src when no options apply\", () => {\n        expect(getAssetUrl(asset())).toBe(\"https://cdn/x/pic.jpg\");\n    });\n\n    it(\"uses & when the src already has a query string\", () => {\n        const url = getAssetUrl(\n            { src: \"https://cdn/x/pic.jpg?v=2\", image: {} },\n            {\n                width: 640\n            }\n        );\n        expect(url).toBe(\"https://cdn/x/pic.jpg?v=2&width=640\");\n    });\n\n    it(\"returns empty string for a missing asset\", () => {\n        expect(getAssetUrl(null)).toBe(\"\");\n        expect(getAssetUrl(undefined)).toBe(\"\");\n    });\n\n    it(\"emits aspectRatio + focal (from the asset) when framing to a ratio\", () => {\n        const a = {\n            ...asset(),\n            image: { width: 800, height: 600, focalPoint: { x: 0.7, y: 0.4 } }\n        };\n        expect(getAssetUrl(a, { aspectRatio: \"16:9\", width: 1200 })).toBe(\n            \"https://cdn/x/pic.jpg?aspectRatio=16:9&focal=0.7,0.4&width=1200\"\n        );\n    });\n\n    it(\"omits focal when it is centered or opted out\", () => {\n        const centered = { ...asset(), image: { focalPoint: { x: 0.5, y: 0.5 } } };\n        expect(getAssetUrl(centered, { aspectRatio: 1 })).toBe(\n            \"https://cdn/x/pic.jpg?aspectRatio=1\"\n        );\n        const offCenter = { ...asset(), image: { focalPoint: { x: 0.7, y: 0.4 } } };\n        expect(getAssetUrl(offCenter, { aspectRatio: 1, focal: false })).toBe(\n            \"https://cdn/x/pic.jpg?aspectRatio=1\"\n        );\n    });\n});\n"],"names":["asset","crop","describe","it","expect","getAssetCropParam","url","getAssetUrl","undefined","a","centered","offCenter"],"mappings":";;AAGA,MAAMA,QAAQ,CAACC,OAAgB;QAC3B,IAAI;QACJ,KAAK;QACL,MAAM;QACN,UAAU;QACV,MAAM;QACN,OAAO;YAAE,OAAO;YAAK,QAAQ;YAAK,GAAIA,OAAO;gBAAEA;YAAK,IAAI,CAAC,CAAC;QAAE;IAChE;AAEAC,SAAS,qBAAqB;IAC1BC,GAAG,8CAA8C;QAC7CC,OAAOC,kBAAkBL,MAAM;YAAE,KAAK;YAAK,MAAM;YAAK,QAAQ;YAAK,OAAO;QAAK,KAAK,IAAI,CACpF;IAER;IAEAG,GAAG,2CAA2C;QAC1CC,OAAOC,kBAAkBL,UAAU,aAAa;QAChDI,OAAOC,kBAAkBL,MAAM;YAAE,KAAK;YAAG,MAAM;YAAG,QAAQ;YAAG,OAAO;QAAE,KAAK,aAAa;QACxFI,OAAOC,kBAAkB,OAAO,aAAa;IACjD;AACJ;AAEAH,SAAS,eAAe;IACpBC,GAAG,gDAAgD;QAC/C,MAAMG,MAAMC,YAAYP,MAAM;YAAE,KAAK;YAAK,MAAM;YAAK,QAAQ;YAAK,OAAO;QAAK,IAAI;YAC9E,OAAO;YACP,QAAQ;QACZ;QACAI,OAAOE,KAAK,IAAI,CAAC;IACrB;IAEAH,GAAG,qCAAqC;QACpCC,OAAOG,YAAYP,SAAS;YAAE,OAAO;QAAI,IAAI,IAAI,CAAC;IACtD;IAEAG,GAAG,2BAA2B;QAC1BC,OACIG,YAAYP,MAAM;YAAE,KAAK;YAAK,MAAM;YAAG,QAAQ;YAAG,OAAO;QAAE,IAAI;YAAE,MAAM;QAAM,IAC/E,IAAI,CAAC;IACX;IAEAG,GAAG,8CAA8C;QAC7CC,OAAOG,YAAYP,UAAU,IAAI,CAAC;IACtC;IAEAG,GAAG,kDAAkD;QACjD,MAAMG,MAAMC,YACR;YAAE,KAAK;YAA6B,OAAO,CAAC;QAAE,GAC9C;YACI,OAAO;QACX;QAEJH,OAAOE,KAAK,IAAI,CAAC;IACrB;IAEAH,GAAG,4CAA4C;QAC3CC,OAAOG,YAAY,OAAO,IAAI,CAAC;QAC/BH,OAAOG,YAAYC,SAAY,IAAI,CAAC;IACxC;IAEAL,GAAG,sEAAsE;QACrE,MAAMM,IAAI;YACN,GAAGT,OAAO;YACV,OAAO;gBAAE,OAAO;gBAAK,QAAQ;gBAAK,YAAY;oBAAE,GAAG;oBAAK,GAAG;gBAAI;YAAE;QACrE;QACAI,OAAOG,YAAYE,GAAG;YAAE,aAAa;YAAQ,OAAO;QAAK,IAAI,IAAI,CAC7D;IAER;IAEAN,GAAG,gDAAgD;QAC/C,MAAMO,WAAW;YAAE,GAAGV,OAAO;YAAE,OAAO;gBAAE,YAAY;oBAAE,GAAG;oBAAK,GAAG;gBAAI;YAAE;QAAE;QACzEI,OAAOG,YAAYG,UAAU;YAAE,aAAa;QAAE,IAAI,IAAI,CAClD;QAEJ,MAAMC,YAAY;YAAE,GAAGX,OAAO;YAAE,OAAO;gBAAE,YAAY;oBAAE,GAAG;oBAAK,GAAG;gBAAI;YAAE;QAAE;QAC1EI,OAAOG,YAAYI,WAAW;YAAE,aAAa;YAAG,OAAO;QAAM,IAAI,IAAI,CACjE;IAER;AACJ"}

package/asset/geometry.d.ts

@@ -0,0 +1,7 @@
+import { type ImageRenderData, type NormalizedRect } from "../image/geometry.js";
+import type { AspectRatioInput } from "../image/types.js";
+import type { Asset } from "./types.js";
+type AssetLike = Pick<Asset, "image">;
+export declare function getAssetVisibleRect(asset: AssetLike, aspectRatio?: AspectRatioInput): NormalizedRect;
+export declare function getAssetImageRenderData(asset: AssetLike, aspectRatio?: AspectRatioInput): ImageRenderData;
+export {};

package/asset/geometry.js

@@ -0,0 +1,10 @@
+import { getImageRenderData, getVisibleRect } from "../image/geometry.js";
+function getAssetVisibleRect(asset, aspectRatio) {
+    return getVisibleRect(asset.image ?? {}, aspectRatio);
+}
+function getAssetImageRenderData(asset, aspectRatio) {
+    return getImageRenderData(asset.image ?? {}, aspectRatio);
+}
+export { getAssetImageRenderData, getAssetVisibleRect };
+
+//# sourceMappingURL=geometry.js.map

package/asset/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset/geometry.js","sources":["../../src/asset/geometry.ts"],"sourcesContent":["import {\n    getImageRenderData,\n    getVisibleRect,\n    type ImageRenderData,\n    type NormalizedRect\n} from \"../image/geometry.js\";\nimport type { AspectRatioInput } from \"../image/types.js\";\nimport type { Asset } from \"./types.js\";\n\ntype AssetLike = Pick<Asset, \"image\">;\n\nexport function getAssetVisibleRect(\n    asset: AssetLike,\n    aspectRatio?: AspectRatioInput\n): NormalizedRect {\n    return getVisibleRect(asset.image ?? {}, aspectRatio);\n}\n\nexport function getAssetImageRenderData(\n    asset: AssetLike,\n    aspectRatio?: AspectRatioInput\n): ImageRenderData {\n    return getImageRenderData(asset.image ?? {}, aspectRatio);\n}\n"],"names":["getAssetVisibleRect","asset","aspectRatio","getVisibleRect","getAssetImageRenderData","getImageRenderData"],"mappings":";AAWO,SAASA,oBACZC,KAAgB,EAChBC,WAA8B;IAE9B,OAAOC,eAAeF,MAAM,KAAK,IAAI,CAAC,GAAGC;AAC7C;AAEO,SAASE,wBACZH,KAAgB,EAChBC,WAA8B;IAE9B,OAAOG,mBAAmBJ,MAAM,KAAK,IAAI,CAAC,GAAGC;AACjD"}

package/asset/imageSrcSet.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Framework-agnostic responsive-image helpers built on {@link getAssetUrl}.
+ *
+ * Every renderer (Next.js, React, Vue, Nuxt — and any future Angular / React Native
+ * / vanilla adapter) needs the same three things from a `Asset`: a width
+ * ladder, a `srcSet` with the per-usage crop/focal/format baked into each width, and
+ * the delivered image's intrinsic (cropped) dimensions for layout-shift-free
+ * rendering. Keeping that logic here — instead of re-deriving it per framework —
+ * makes each renderer a thin adapter over the one delivery-URL contract.
+ */
+import type { Asset } from "./types.js";
+import { type AssetUrlOptions } from "./deliveryUrl.js";
+/**
+ * Canonical delivery-width ladder. Kept in lockstep with the server's resize ladder
+ * (`imageResizeWidths` in `@webiny/api-file-manager`) so every width a renderer
+ * requests snaps to a cached variant instead of forcing a fresh transform.
+ */
+export declare const IMAGE_RESIZE_WIDTHS: readonly [128, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+export interface ImageDimensions {
+    /** Delivered (cropped) width in pixels, or `0` when the intrinsic size is unknown. */
+    width: number;
+    /** Delivered (cropped) height in pixels, or `0` when the intrinsic size is unknown. */
+    height: number;
+}
+/**
+ * The intrinsic dimensions of the *delivered* image — i.e. after the per-usage crop
+ * (and an optional target aspect ratio) are applied. Renderers pass these to their
+ * layout primitive (e.g. `next/image`'s `width`/`height`) so the box reserves the
+ * right space and the page doesn't shift as the image loads. Returns `0`/`0` when the
+ * asset's intrinsic size is unknown.
+ */
+export declare const getImageDimensions: (asset: Pick<Asset, "image"> | null | undefined, options?: {
+    aspectRatio?: number | string;
+}) => ImageDimensions;
+export interface ImageSrcSetOptions extends Omit<AssetUrlOptions, "width"> {
+    /** Widths to emit. Defaults to {@link IMAGE_RESIZE_WIDTHS}, trimmed by `cssWidth`. */
+    widths?: readonly number[];
+    /**
+     * A fixed CSS width for the rendered image (`"320px"` or `320`). When set, the
+     * ladder is trimmed to the smallest set that still covers it (incl. high-DPR);
+     * fluid widths (`%`, `vw`, unset) use the full ladder.
+     */
+    cssWidth?: number | string;
+}
+export interface ImageSrcSet {
+    /** Single-URL fallback for clients that ignore `srcSet` (the largest emitted width). */
+    src: string;
+    /** `"<url> 128w, <url> 384w, …"` — crop/focal/format baked into every width. */
+    srcSet: string;
+    /** Delivered (cropped) intrinsic dimensions; `0` when unknown. */
+    width: number;
+    height: number;
+}
+/**
+ * Build the responsive descriptor for an asset: a `srcSet` across the width ladder
+ * (each entry a delivery URL with the per-usage crop/focal/format baked in), a
+ * single-URL `src` fallback, and the delivered dimensions. Framework-agnostic — hand
+ * `src`/`srcSet` to any `<img>`-like primitive. Returns empty strings for a missing
+ * asset.
+ */
+export declare const getImageSrcSet: (asset: (Pick<Asset, "src" | "image"> & {
+    src?: string;
+}) | null | undefined, options?: ImageSrcSetOptions) => ImageSrcSet;

package/asset/imageSrcSet.js

@@ -0,0 +1,98 @@
+import { getAssetUrl } from "./deliveryUrl.js";
+const IMAGE_RESIZE_WIDTHS = [
+    128,
+    384,
+    640,
+    750,
+    828,
+    1080,
+    1200,
+    1920,
+    2048,
+    3840
+];
+const parseAspectRatio = (input)=>{
+    if (void 0 === input) return;
+    if ("number" == typeof input) return input > 0 ? input : void 0;
+    const trimmed = input.trim();
+    if (trimmed.includes(":")) {
+        const [w, h] = trimmed.split(":").map(Number);
+        return w > 0 && h > 0 ? w / h : void 0;
+    }
+    const n = Number(trimmed);
+    return n > 0 ? n : void 0;
+};
+const toPx = (cssWidth)=>{
+    if (void 0 === cssWidth) return;
+    if ("number" == typeof cssWidth) return cssWidth > 0 ? cssWidth : void 0;
+    const trimmed = cssWidth.trim();
+    if (trimmed.endsWith("px")) {
+        const n = parseInt(trimmed, 10);
+        return n > 0 ? n : void 0;
+    }
+};
+const resolveWidths = (widths, cssWidth)=>{
+    const px = toPx(cssWidth);
+    if (!px) return [
+        ...widths
+    ];
+    const result = [];
+    for (const w of widths){
+        result.push(w);
+        if (w >= 2 * px) break;
+    }
+    return result.length ? result : [
+        widths[widths.length - 1]
+    ];
+};
+const getImageDimensions = (asset, options = {})=>{
+    const img = asset?.image;
+    const iw = img?.width ?? 0;
+    const ih = img?.height ?? 0;
+    if (!iw || !ih) return {
+        width: 0,
+        height: 0
+    };
+    const crop = img?.crop;
+    const width = crop ? Math.round((1 - (crop.left ?? 0) - (crop.right ?? 0)) * iw) : iw;
+    const height = crop ? Math.round((1 - (crop.top ?? 0) - (crop.bottom ?? 0)) * ih) : ih;
+    const ar = parseAspectRatio(options.aspectRatio);
+    if (ar) return {
+        width,
+        height: Math.round(width / ar)
+    };
+    return {
+        width,
+        height
+    };
+};
+const getImageSrcSet = (asset, options = {})=>{
+    const { widths = IMAGE_RESIZE_WIDTHS, cssWidth, ...urlOptions } = options;
+    const dims = getImageDimensions(asset, {
+        aspectRatio: urlOptions.aspectRatio
+    });
+    if (!asset?.src) return {
+        src: "",
+        srcSet: "",
+        width: dims.width,
+        height: dims.height
+    };
+    const selected = resolveWidths(widths, cssWidth);
+    const srcSet = selected.map((w)=>`${getAssetUrl(asset, {
+            ...urlOptions,
+            width: w
+        })} ${w}w`).join(", ");
+    const src = getAssetUrl(asset, {
+        ...urlOptions,
+        width: selected[selected.length - 1]
+    });
+    return {
+        src,
+        srcSet,
+        width: dims.width,
+        height: dims.height
+    };
+};
+export { IMAGE_RESIZE_WIDTHS, getImageDimensions, getImageSrcSet };
+
+//# sourceMappingURL=imageSrcSet.js.map

package/asset/imageSrcSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset/imageSrcSet.js","sources":["../../src/asset/imageSrcSet.ts"],"sourcesContent":["/**\n * Framework-agnostic responsive-image helpers built on {@link getAssetUrl}.\n *\n * Every renderer (Next.js, React, Vue, Nuxt — and any future Angular / React Native\n * / vanilla adapter) needs the same three things from a `Asset`: a width\n * ladder, a `srcSet` with the per-usage crop/focal/format baked into each width, and\n * the delivered image's intrinsic (cropped) dimensions for layout-shift-free\n * rendering. Keeping that logic here — instead of re-deriving it per framework —\n * makes each renderer a thin adapter over the one delivery-URL contract.\n */\nimport type { Asset } from \"./types.js\";\nimport { getAssetUrl, type AssetUrlOptions } from \"./deliveryUrl.js\";\n\n/**\n * Canonical delivery-width ladder. Kept in lockstep with the server's resize ladder\n * (`imageResizeWidths` in `@webiny/api-file-manager`) so every width a renderer\n * requests snaps to a cached variant instead of forcing a fresh transform.\n */\nexport const IMAGE_RESIZE_WIDTHS = [128, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840] as const;\n\n/** Parse an aspect ratio given as a number, a `\"w:h\"` string, or a decimal string. */\nconst parseAspectRatio = (input: number | string | undefined): number | undefined => {\n    if (input === undefined) {\n        return undefined;\n    }\n    if (typeof input === \"number\") {\n        return input > 0 ? input : undefined;\n    }\n    const trimmed = input.trim();\n    if (trimmed.includes(\":\")) {\n        const [w, h] = trimmed.split(\":\").map(Number);\n        return w > 0 && h > 0 ? w / h : undefined;\n    }\n    const n = Number(trimmed);\n    return n > 0 ? n : undefined;\n};\n\n/** Resolve a fixed CSS width to pixels, or `undefined` for fluid widths (`%`, `vw`, …). */\nconst toPx = (cssWidth: number | string | undefined): number | undefined => {\n    if (cssWidth === undefined) {\n        return undefined;\n    }\n    if (typeof cssWidth === \"number\") {\n        return cssWidth > 0 ? cssWidth : undefined;\n    }\n    const trimmed = cssWidth.trim();\n    if (trimmed.endsWith(\"px\")) {\n        const n = parseInt(trimmed, 10);\n        return n > 0 ? n : undefined;\n    }\n    return undefined;\n};\n\n/**\n * Trim the ladder to the smallest set that still covers a fixed CSS width, including\n * one step past `2×` for high-DPR screens. Fluid widths use the full ladder.\n */\nconst resolveWidths = (\n    widths: readonly number[],\n    cssWidth: number | string | undefined\n): number[] => {\n    const px = toPx(cssWidth);\n    if (!px) {\n        return [...widths];\n    }\n    const result: number[] = [];\n    for (const w of widths) {\n        result.push(w);\n        if (w >= px * 2) {\n            break;\n        }\n    }\n    return result.length ? result : [widths[widths.length - 1]];\n};\n\nexport interface ImageDimensions {\n    /** Delivered (cropped) width in pixels, or `0` when the intrinsic size is unknown. */\n    width: number;\n    /** Delivered (cropped) height in pixels, or `0` when the intrinsic size is unknown. */\n    height: number;\n}\n\n/**\n * The intrinsic dimensions of the *delivered* image — i.e. after the per-usage crop\n * (and an optional target aspect ratio) are applied. Renderers pass these to their\n * layout primitive (e.g. `next/image`'s `width`/`height`) so the box reserves the\n * right space and the page doesn't shift as the image loads. Returns `0`/`0` when the\n * asset's intrinsic size is unknown.\n */\nexport const getImageDimensions = (\n    asset: Pick<Asset, \"image\"> | null | undefined,\n    options: { aspectRatio?: number | string } = {}\n): ImageDimensions => {\n    const img = asset?.image;\n    const iw = img?.width ?? 0;\n    const ih = img?.height ?? 0;\n    if (!iw || !ih) {\n        return { width: 0, height: 0 };\n    }\n    const crop = img?.crop;\n    const width = crop ? Math.round((1 - (crop.left ?? 0) - (crop.right ?? 0)) * iw) : iw;\n    const height = crop ? Math.round((1 - (crop.top ?? 0) - (crop.bottom ?? 0)) * ih) : ih;\n\n    const ar = parseAspectRatio(options.aspectRatio);\n    if (ar) {\n        // Framed to a fixed ratio server-side: keep the cropped width, derive height.\n        return { width, height: Math.round(width / ar) };\n    }\n    return { width, height };\n};\n\nexport interface ImageSrcSetOptions extends Omit<AssetUrlOptions, \"width\"> {\n    /** Widths to emit. Defaults to {@link IMAGE_RESIZE_WIDTHS}, trimmed by `cssWidth`. */\n    widths?: readonly number[];\n    /**\n     * A fixed CSS width for the rendered image (`\"320px\"` or `320`). When set, the\n     * ladder is trimmed to the smallest set that still covers it (incl. high-DPR);\n     * fluid widths (`%`, `vw`, unset) use the full ladder.\n     */\n    cssWidth?: number | string;\n}\n\nexport interface ImageSrcSet {\n    /** Single-URL fallback for clients that ignore `srcSet` (the largest emitted width). */\n    src: string;\n    /** `\"<url> 128w, <url> 384w, …\"` — crop/focal/format baked into every width. */\n    srcSet: string;\n    /** Delivered (cropped) intrinsic dimensions; `0` when unknown. */\n    width: number;\n    height: number;\n}\n\n/**\n * Build the responsive descriptor for an asset: a `srcSet` across the width ladder\n * (each entry a delivery URL with the per-usage crop/focal/format baked in), a\n * single-URL `src` fallback, and the delivered dimensions. Framework-agnostic — hand\n * `src`/`srcSet` to any `<img>`-like primitive. Returns empty strings for a missing\n * asset.\n */\nexport const getImageSrcSet = (\n    asset: (Pick<Asset, \"src\" | \"image\"> & { src?: string }) | null | undefined,\n    options: ImageSrcSetOptions = {}\n): ImageSrcSet => {\n    const { widths = IMAGE_RESIZE_WIDTHS, cssWidth, ...urlOptions } = options;\n    const dims = getImageDimensions(asset, { aspectRatio: urlOptions.aspectRatio });\n\n    if (!asset?.src) {\n        return { src: \"\", srcSet: \"\", width: dims.width, height: dims.height };\n    }\n\n    const selected = resolveWidths(widths, cssWidth);\n    const srcSet = selected\n        .map(w => `${getAssetUrl(asset, { ...urlOptions, width: w })} ${w}w`)\n        .join(\", \");\n    const src = getAssetUrl(asset, { ...urlOptions, width: selected[selected.length - 1] });\n\n    return { src, srcSet, width: dims.width, height: dims.height };\n};\n"],"names":["IMAGE_RESIZE_WIDTHS","parseAspectRatio","input","undefined","trimmed","w","h","Number","n","toPx","cssWidth","parseInt","resolveWidths","widths","px","result","getImageDimensions","asset","options","img","iw","ih","crop","width","Math","height","ar","getImageSrcSet","urlOptions","dims","selected","srcSet","getAssetUrl","src"],"mappings":"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"}

package/asset/imageSrcSet.test.d.ts

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

package/asset/imageSrcSet.test.js

@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+import { IMAGE_RESIZE_WIDTHS, getImageDimensions, getImageSrcSet } from "./imageSrcSet.js";
+const asset = (image)=>({
+        id: "f",
+        src: "https://cdn/x/pic.jpg",
+        name: "pic.jpg",
+        mimeType: "image/jpeg",
+        size: 1,
+        image: {
+            width: 800,
+            height: 600,
+            ...image
+        }
+    });
+describe("getImageDimensions", ()=>{
+    it("returns intrinsic dimensions when there is no crop", ()=>{
+        expect(getImageDimensions(asset())).toEqual({
+            width: 800,
+            height: 600
+        });
+    });
+    it("shrinks by the crop insets", ()=>{
+        expect(getImageDimensions(asset({
+            crop: {
+                top: 0.1,
+                left: 0.25,
+                bottom: 0.1,
+                right: 0.25
+            }
+        }))).toEqual({
+            width: 400,
+            height: 480
+        });
+    });
+    it("derives height from a target aspect ratio", ()=>{
+        expect(getImageDimensions(asset({
+            crop: {
+                top: 0,
+                left: 0.25,
+                bottom: 0,
+                right: 0.25
+            }
+        }), {
+            aspectRatio: "16:9"
+        })).toEqual({
+            width: 400,
+            height: 225
+        });
+    });
+    it("returns 0/0 when the intrinsic size is unknown", ()=>{
+        expect(getImageDimensions({
+            image: {}
+        })).toEqual({
+            width: 0,
+            height: 0
+        });
+        expect(getImageDimensions(null)).toEqual({
+            width: 0,
+            height: 0
+        });
+    });
+});
+describe("getImageSrcSet", ()=>{
+    it("emits the full ladder with crop + format baked into every width", ()=>{
+        const { srcSet, width, height } = getImageSrcSet(asset({
+            crop: {
+                top: 0.1,
+                left: 0,
+                bottom: 0,
+                right: 0
+            }
+        }), {
+            format: "auto"
+        });
+        const entries = srcSet.split(", ");
+        expect(entries).toHaveLength(IMAGE_RESIZE_WIDTHS.length);
+        expect(entries[0]).toBe("https://cdn/x/pic.jpg?crop=0.1,0,0,0&width=128&format=auto 128w");
+        expect(width).toBe(800);
+        expect(height).toBe(540);
+    });
+    it("trims the ladder to a fixed CSS width (incl. 2x DPR)", ()=>{
+        const { srcSet, src } = getImageSrcSet(asset(), {
+            cssWidth: "300px"
+        });
+        const widths = srcSet.split(", ").map((e)=>Number(e.match(/width=(\d+)/)[1]));
+        expect(widths).toEqual([
+            128,
+            384,
+            640
+        ]);
+        expect(src).toBe("https://cdn/x/pic.jpg?width=640");
+    });
+    it("returns empty strings for a missing asset", ()=>{
+        expect(getImageSrcSet(null)).toEqual({
+            src: "",
+            srcSet: "",
+            width: 0,
+            height: 0
+        });
+    });
+});
+
+//# sourceMappingURL=imageSrcSet.test.js.map

package/asset/imageSrcSet.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset/imageSrcSet.test.js","sources":["../../src/asset/imageSrcSet.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { IMAGE_RESIZE_WIDTHS, getImageDimensions, getImageSrcSet } from \"./imageSrcSet.js\";\n\nconst asset = (image?: any) => ({\n    id: \"f\",\n    src: \"https://cdn/x/pic.jpg\",\n    name: \"pic.jpg\",\n    mimeType: \"image/jpeg\",\n    size: 1,\n    image: { width: 800, height: 600, ...image }\n});\n\ndescribe(\"getImageDimensions\", () => {\n    it(\"returns intrinsic dimensions when there is no crop\", () => {\n        expect(getImageDimensions(asset())).toEqual({ width: 800, height: 600 });\n    });\n\n    it(\"shrinks by the crop insets\", () => {\n        expect(\n            getImageDimensions(asset({ crop: { top: 0.1, left: 0.25, bottom: 0.1, right: 0.25 } }))\n        ).toEqual({ width: 400, height: 480 });\n    });\n\n    it(\"derives height from a target aspect ratio\", () => {\n        // Cropped width 400 @ 16:9 -> height 225.\n        expect(\n            getImageDimensions(asset({ crop: { top: 0, left: 0.25, bottom: 0, right: 0.25 } }), {\n                aspectRatio: \"16:9\"\n            })\n        ).toEqual({ width: 400, height: 225 });\n    });\n\n    it(\"returns 0/0 when the intrinsic size is unknown\", () => {\n        expect(getImageDimensions({ image: {} })).toEqual({ width: 0, height: 0 });\n        expect(getImageDimensions(null)).toEqual({ width: 0, height: 0 });\n    });\n});\n\ndescribe(\"getImageSrcSet\", () => {\n    it(\"emits the full ladder with crop + format baked into every width\", () => {\n        const { srcSet, width, height } = getImageSrcSet(\n            asset({ crop: { top: 0.1, left: 0, bottom: 0, right: 0 } }),\n            { format: \"auto\" }\n        );\n        const entries = srcSet.split(\", \");\n        expect(entries).toHaveLength(IMAGE_RESIZE_WIDTHS.length);\n        expect(entries[0]).toBe(\"https://cdn/x/pic.jpg?crop=0.1,0,0,0&width=128&format=auto 128w\");\n        expect(width).toBe(800);\n        expect(height).toBe(540);\n    });\n\n    it(\"trims the ladder to a fixed CSS width (incl. 2x DPR)\", () => {\n        const { srcSet, src } = getImageSrcSet(asset(), { cssWidth: \"300px\" });\n        const widths = srcSet.split(\", \").map(e => Number(e.match(/width=(\\d+)/)![1]));\n        // Smallest set covering 300px up to 2x (600) -> 128, 384, 640.\n        expect(widths).toEqual([128, 384, 640]);\n        // `src` fallback is the largest emitted width.\n        expect(src).toBe(\"https://cdn/x/pic.jpg?width=640\");\n    });\n\n    it(\"returns empty strings for a missing asset\", () => {\n        expect(getImageSrcSet(null)).toEqual({ src: \"\", srcSet: \"\", width: 0, height: 0 });\n    });\n});\n"],"names":["asset","image","describe","it","expect","getImageDimensions","srcSet","width","height","getImageSrcSet","entries","IMAGE_RESIZE_WIDTHS","src","widths","e","Number"],"mappings":";;AAGA,MAAMA,QAAQ,CAACC,QAAiB;QAC5B,IAAI;QACJ,KAAK;QACL,MAAM;QACN,UAAU;QACV,MAAM;QACN,OAAO;YAAE,OAAO;YAAK,QAAQ;YAAK,GAAGA,KAAK;QAAC;IAC/C;AAEAC,SAAS,sBAAsB;IAC3BC,GAAG,sDAAsD;QACrDC,OAAOC,mBAAmBL,UAAU,OAAO,CAAC;YAAE,OAAO;YAAK,QAAQ;QAAI;IAC1E;IAEAG,GAAG,8BAA8B;QAC7BC,OACIC,mBAAmBL,MAAM;YAAE,MAAM;gBAAE,KAAK;gBAAK,MAAM;gBAAM,QAAQ;gBAAK,OAAO;YAAK;QAAE,KACtF,OAAO,CAAC;YAAE,OAAO;YAAK,QAAQ;QAAI;IACxC;IAEAG,GAAG,6CAA6C;QAE5CC,OACIC,mBAAmBL,MAAM;YAAE,MAAM;gBAAE,KAAK;gBAAG,MAAM;gBAAM,QAAQ;gBAAG,OAAO;YAAK;QAAE,IAAI;YAChF,aAAa;QACjB,IACF,OAAO,CAAC;YAAE,OAAO;YAAK,QAAQ;QAAI;IACxC;IAEAG,GAAG,kDAAkD;QACjDC,OAAOC,mBAAmB;YAAE,OAAO,CAAC;QAAE,IAAI,OAAO,CAAC;YAAE,OAAO;YAAG,QAAQ;QAAE;QACxED,OAAOC,mBAAmB,OAAO,OAAO,CAAC;YAAE,OAAO;YAAG,QAAQ;QAAE;IACnE;AACJ;AAEAH,SAAS,kBAAkB;IACvBC,GAAG,mEAAmE;QAClE,MAAM,EAAEG,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,eAC9BT,MAAM;YAAE,MAAM;gBAAE,KAAK;gBAAK,MAAM;gBAAG,QAAQ;gBAAG,OAAO;YAAE;QAAE,IACzD;YAAE,QAAQ;QAAO;QAErB,MAAMU,UAAUJ,OAAO,KAAK,CAAC;QAC7BF,OAAOM,SAAS,YAAY,CAACC,oBAAoB,MAAM;QACvDP,OAAOM,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC;QACxBN,OAAOG,OAAO,IAAI,CAAC;QACnBH,OAAOI,QAAQ,IAAI,CAAC;IACxB;IAEAL,GAAG,wDAAwD;QACvD,MAAM,EAAEG,MAAM,EAAEM,GAAG,EAAE,GAAGH,eAAeT,SAAS;YAAE,UAAU;QAAQ;QACpE,MAAMa,SAASP,OAAO,KAAK,CAAC,MAAM,GAAG,CAACQ,CAAAA,IAAKC,OAAOD,EAAE,KAAK,CAAC,cAAe,CAAC,EAAE;QAE5EV,OAAOS,QAAQ,OAAO,CAAC;YAAC;YAAK;YAAK;SAAI;QAEtCT,OAAOQ,KAAK,IAAI,CAAC;IACrB;IAEAT,GAAG,6CAA6C;QAC5CC,OAAOK,eAAe,OAAO,OAAO,CAAC;YAAE,KAAK;YAAI,QAAQ;YAAI,OAAO;YAAG,QAAQ;QAAE;IACpF;AACJ"}

package/asset/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./normalize.js";
+export * from "./geometry.js";
+export * from "./deliveryUrl.js";
+export * from "./imageSrcSet.js";

package/asset/index.js

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./normalize.js";
+export * from "./geometry.js";
+export * from "./deliveryUrl.js";
+export * from "./imageSrcSet.js";

package/asset/normalize.d.ts

@@ -0,0 +1,24 @@
+import type { Asset, AssetCategory, AssetImage } from "./types.js";
+export declare function getAssetCategory(mimeType?: string | null): AssetCategory;
+interface LegacyImageEdit {
+    crop?: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
+    hotspot?: {
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    };
+    alt?: string;
+    caption?: string;
+}
+export declare function assetImageFromLegacyEdit(edit?: LegacyImageEdit | null, dimensions?: {
+    width?: number | null;
+    height?: number | null;
+}): AssetImage | undefined;
+export declare function normalizeToAsset(input: unknown): Asset | null;
+export {};