@nonphoto/sanity-image 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Jonas Luebbers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,527 @@
+import * as valibot from 'valibot';
+import { InferOutput } from 'valibot';
+
+declare const transformationsSchema: Omit<valibot.ObjectSchema<{
+    readonly auto: valibot.LiteralSchema<"format", undefined>;
+    readonly background: valibot.StringSchema<undefined>;
+    readonly blur: valibot.NumberSchema<undefined>;
+    readonly crop: valibot.UnionSchema<[valibot.LiteralSchema<"top", undefined>, valibot.LiteralSchema<"bottom", undefined>, valibot.LiteralSchema<"left", undefined>, valibot.LiteralSchema<"right", undefined>, valibot.LiteralSchema<"center", undefined>, valibot.LiteralSchema<"focalpoint", undefined>, valibot.LiteralSchema<"entropy", undefined>], undefined>;
+    readonly download: valibot.UnionSchema<[valibot.StringSchema<undefined>, valibot.BooleanSchema<undefined>], undefined>;
+    readonly dpr: valibot.UnionSchema<[valibot.LiteralSchema<1, undefined>, valibot.LiteralSchema<2, undefined>, valibot.LiteralSchema<3, undefined>], undefined>;
+    readonly fit: valibot.UnionSchema<[valibot.LiteralSchema<"clip", undefined>, valibot.LiteralSchema<"crop", undefined>, valibot.LiteralSchema<"fill", undefined>, valibot.LiteralSchema<"fillmax", undefined>, valibot.LiteralSchema<"max", undefined>, valibot.LiteralSchema<"scale", undefined>, valibot.LiteralSchema<"min", undefined>], undefined>;
+    readonly flipHorizontal: valibot.BooleanSchema<undefined>;
+    readonly flipVertical: valibot.BooleanSchema<undefined>;
+    readonly focalPoint: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+    readonly format: valibot.UnionSchema<[valibot.LiteralSchema<"jpg", undefined>, valibot.LiteralSchema<"pjpg", undefined>, valibot.LiteralSchema<"png", undefined>, valibot.LiteralSchema<"webp", undefined>], undefined>;
+    readonly frame: valibot.NumberSchema<undefined>;
+    readonly height: valibot.NumberSchema<undefined>;
+    readonly invert: valibot.BooleanSchema<undefined>;
+    readonly maxHeight: valibot.NumberSchema<undefined>;
+    readonly maxWidth: valibot.NumberSchema<undefined>;
+    readonly minHeight: valibot.NumberSchema<undefined>;
+    readonly minWidth: valibot.NumberSchema<undefined>;
+    readonly orientation: valibot.UnionSchema<[valibot.LiteralSchema<0, undefined>, valibot.LiteralSchema<90, undefined>, valibot.LiteralSchema<180, undefined>, valibot.LiteralSchema<270, undefined>], undefined>;
+    readonly pad: valibot.NumberSchema<undefined>;
+    readonly quality: valibot.NumberSchema<undefined>;
+    readonly rect: valibot.ObjectSchema<{
+        readonly pos: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+        readonly size: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+    }, undefined>;
+    readonly saturation: valibot.NumberSchema<undefined>;
+    readonly sharpen: valibot.NumberSchema<undefined>;
+    readonly width: valibot.NumberSchema<undefined>;
+}, undefined>, "~types" | "~run" | "~standard" | "entries"> & {
+    readonly entries: {
+        readonly auto: valibot.OptionalSchema<valibot.LiteralSchema<"format", undefined>, undefined>;
+        readonly background: valibot.OptionalSchema<valibot.StringSchema<undefined>, undefined>;
+        readonly blur: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly crop: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<"top", undefined>, valibot.LiteralSchema<"bottom", undefined>, valibot.LiteralSchema<"left", undefined>, valibot.LiteralSchema<"right", undefined>, valibot.LiteralSchema<"center", undefined>, valibot.LiteralSchema<"focalpoint", undefined>, valibot.LiteralSchema<"entropy", undefined>], undefined>, undefined>;
+        readonly download: valibot.OptionalSchema<valibot.UnionSchema<[valibot.StringSchema<undefined>, valibot.BooleanSchema<undefined>], undefined>, undefined>;
+        readonly dpr: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<1, undefined>, valibot.LiteralSchema<2, undefined>, valibot.LiteralSchema<3, undefined>], undefined>, undefined>;
+        readonly fit: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<"clip", undefined>, valibot.LiteralSchema<"crop", undefined>, valibot.LiteralSchema<"fill", undefined>, valibot.LiteralSchema<"fillmax", undefined>, valibot.LiteralSchema<"max", undefined>, valibot.LiteralSchema<"scale", undefined>, valibot.LiteralSchema<"min", undefined>], undefined>, undefined>;
+        readonly flipHorizontal: valibot.OptionalSchema<valibot.BooleanSchema<undefined>, undefined>;
+        readonly flipVertical: valibot.OptionalSchema<valibot.BooleanSchema<undefined>, undefined>;
+        readonly focalPoint: valibot.OptionalSchema<valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>, undefined>;
+        readonly format: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<"jpg", undefined>, valibot.LiteralSchema<"pjpg", undefined>, valibot.LiteralSchema<"png", undefined>, valibot.LiteralSchema<"webp", undefined>], undefined>, undefined>;
+        readonly frame: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly height: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly invert: valibot.OptionalSchema<valibot.BooleanSchema<undefined>, undefined>;
+        readonly maxHeight: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly maxWidth: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly minHeight: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly minWidth: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly orientation: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<0, undefined>, valibot.LiteralSchema<90, undefined>, valibot.LiteralSchema<180, undefined>, valibot.LiteralSchema<270, undefined>], undefined>, undefined>;
+        readonly pad: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly quality: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly rect: valibot.OptionalSchema<valibot.ObjectSchema<{
+            readonly pos: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+            readonly size: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+        }, undefined>, undefined>;
+        readonly saturation: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly sharpen: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly width: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    };
+    readonly '~standard': valibot.StandardProps<{
+        auto?: "format" | undefined;
+        background?: string | undefined;
+        blur?: number | undefined;
+        crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+        download?: string | boolean | undefined;
+        dpr?: 1 | 2 | 3 | undefined;
+        fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+        flipHorizontal?: boolean | undefined;
+        flipVertical?: boolean | undefined;
+        focalPoint?: [number, number] | undefined;
+        format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+        frame?: number | undefined;
+        height?: number | undefined;
+        invert?: boolean | undefined;
+        maxHeight?: number | undefined;
+        maxWidth?: number | undefined;
+        minHeight?: number | undefined;
+        minWidth?: number | undefined;
+        orientation?: 0 | 90 | 180 | 270 | undefined;
+        pad?: number | undefined;
+        quality?: number | undefined;
+        rect?: {
+            pos: [number, number];
+            size: [number, number];
+        } | undefined;
+        saturation?: number | undefined;
+        sharpen?: number | undefined;
+        width?: number | undefined;
+    }, {
+        auto?: "format" | undefined;
+        background?: string | undefined;
+        blur?: number | undefined;
+        crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+        download?: string | boolean | undefined;
+        dpr?: 1 | 2 | 3 | undefined;
+        fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+        flipHorizontal?: boolean | undefined;
+        flipVertical?: boolean | undefined;
+        focalPoint?: [number, number] | undefined;
+        format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+        frame?: number | undefined;
+        height?: number | undefined;
+        invert?: boolean | undefined;
+        maxHeight?: number | undefined;
+        maxWidth?: number | undefined;
+        minHeight?: number | undefined;
+        minWidth?: number | undefined;
+        orientation?: 0 | 90 | 180 | 270 | undefined;
+        pad?: number | undefined;
+        quality?: number | undefined;
+        rect?: {
+            pos: [number, number];
+            size: [number, number];
+        } | undefined;
+        saturation?: number | undefined;
+        sharpen?: number | undefined;
+        width?: number | undefined;
+    }>;
+    readonly '~run': (dataset: valibot.UnknownDataset, config: valibot.Config<valibot.BaseIssue<unknown>>) => valibot.OutputDataset<{
+        auto?: "format" | undefined;
+        background?: string | undefined;
+        blur?: number | undefined;
+        crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+        download?: string | boolean | undefined;
+        dpr?: 1 | 2 | 3 | undefined;
+        fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+        flipHorizontal?: boolean | undefined;
+        flipVertical?: boolean | undefined;
+        focalPoint?: [number, number] | undefined;
+        format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+        frame?: number | undefined;
+        height?: number | undefined;
+        invert?: boolean | undefined;
+        maxHeight?: number | undefined;
+        maxWidth?: number | undefined;
+        minHeight?: number | undefined;
+        minWidth?: number | undefined;
+        orientation?: 0 | 90 | 180 | 270 | undefined;
+        pad?: number | undefined;
+        quality?: number | undefined;
+        rect?: {
+            pos: [number, number];
+            size: [number, number];
+        } | undefined;
+        saturation?: number | undefined;
+        sharpen?: number | undefined;
+        width?: number | undefined;
+    }, valibot.NumberIssue | valibot.ObjectIssue | valibot.TupleIssue | valibot.StringIssue | valibot.LiteralIssue | valibot.UnionIssue<valibot.LiteralIssue> | valibot.BooleanIssue | valibot.UnionIssue<valibot.StringIssue | valibot.BooleanIssue>>;
+    readonly '~types'?: {
+        readonly input: {
+            auto?: "format" | undefined;
+            background?: string | undefined;
+            blur?: number | undefined;
+            crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+            download?: string | boolean | undefined;
+            dpr?: 1 | 2 | 3 | undefined;
+            fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+            flipHorizontal?: boolean | undefined;
+            flipVertical?: boolean | undefined;
+            focalPoint?: [number, number] | undefined;
+            format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+            frame?: number | undefined;
+            height?: number | undefined;
+            invert?: boolean | undefined;
+            maxHeight?: number | undefined;
+            maxWidth?: number | undefined;
+            minHeight?: number | undefined;
+            minWidth?: number | undefined;
+            orientation?: 0 | 90 | 180 | 270 | undefined;
+            pad?: number | undefined;
+            quality?: number | undefined;
+            rect?: {
+                pos: [number, number];
+                size: [number, number];
+            } | undefined;
+            saturation?: number | undefined;
+            sharpen?: number | undefined;
+            width?: number | undefined;
+        };
+        readonly output: {
+            auto?: "format" | undefined;
+            background?: string | undefined;
+            blur?: number | undefined;
+            crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+            download?: string | boolean | undefined;
+            dpr?: 1 | 2 | 3 | undefined;
+            fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+            flipHorizontal?: boolean | undefined;
+            flipVertical?: boolean | undefined;
+            focalPoint?: [number, number] | undefined;
+            format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+            frame?: number | undefined;
+            height?: number | undefined;
+            invert?: boolean | undefined;
+            maxHeight?: number | undefined;
+            maxWidth?: number | undefined;
+            minHeight?: number | undefined;
+            minWidth?: number | undefined;
+            orientation?: 0 | 90 | 180 | 270 | undefined;
+            pad?: number | undefined;
+            quality?: number | undefined;
+            rect?: {
+                pos: [number, number];
+                size: [number, number];
+            } | undefined;
+            saturation?: number | undefined;
+            sharpen?: number | undefined;
+            width?: number | undefined;
+        };
+        readonly issue: valibot.NumberIssue | valibot.ObjectIssue | valibot.TupleIssue | valibot.StringIssue | valibot.LiteralIssue | valibot.UnionIssue<valibot.LiteralIssue> | valibot.BooleanIssue | valibot.UnionIssue<valibot.StringIssue | valibot.BooleanIssue>;
+    } | undefined;
+};
+type Transformations = InferOutput<typeof transformationsSchema>;
+declare function isTransformations(input: unknown): input is Transformations;
+declare function transformationsToURLSearch({ auto, background, blur, crop, download, dpr, fit, flipHorizontal, flipVertical, focalPoint, format, frame, height, invert, maxHeight, maxWidth, minHeight, minWidth, orientation, pad, quality, rect, saturation, sharpen, width, }: Transformations): string;
+
+type ImageSource = ImageObject | ImageAsset | AssetLike | ReferenceLike | string;
+type AssetLike = InferOutput<typeof assetLikeSchema>;
+type ReferenceLike = InferOutput<typeof referenceLikeSchema>;
+type ImageObject = InferOutput<typeof imageObjectSchema>;
+type ImageAsset = InferOutput<typeof imageAssetSchema>;
+declare const assetLikeSchema: valibot.ObjectSchema<{
+    readonly _id: valibot.StringSchema<undefined>;
+}, undefined>;
+declare const referenceLikeSchema: valibot.ObjectSchema<{
+    readonly _ref: valibot.StringSchema<undefined>;
+}, undefined>;
+declare const imageObjectSchema: valibot.ObjectSchema<{
+    readonly asset: valibot.NullishSchema<valibot.UnionSchema<[valibot.ObjectSchema<{
+        readonly _id: valibot.StringSchema<undefined>;
+    }, undefined>, valibot.ObjectSchema<{
+        readonly _ref: valibot.StringSchema<undefined>;
+    }, undefined>, valibot.StringSchema<undefined>], undefined>, undefined>;
+    readonly crop: valibot.NullishSchema<valibot.ObjectSchema<{
+        readonly top: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly bottom: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly left: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly right: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    }, undefined>, undefined>;
+    readonly hotspot: valibot.NullishSchema<valibot.ObjectSchema<{
+        readonly x: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly y: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly width: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        readonly height: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    }, undefined>, undefined>;
+}, undefined>;
+declare const imageAssetSchema: valibot.ObjectSchema<{
+    readonly _id: valibot.StringSchema<undefined>;
+    readonly assetId: valibot.StringSchema<undefined>;
+    readonly width: valibot.NumberSchema<undefined>;
+    readonly height: valibot.NumberSchema<undefined>;
+    readonly extension: valibot.StringSchema<undefined>;
+    readonly vanityName: valibot.NullishSchema<valibot.StringSchema<undefined>, undefined>;
+    readonly transformations: valibot.NullishSchema<Omit<valibot.ObjectSchema<{
+        readonly auto: valibot.LiteralSchema<"format", undefined>;
+        readonly background: valibot.StringSchema<undefined>;
+        readonly blur: valibot.NumberSchema<undefined>;
+        readonly crop: valibot.UnionSchema<[valibot.LiteralSchema<"top", undefined>, valibot.LiteralSchema<"bottom", undefined>, valibot.LiteralSchema<"left", undefined>, valibot.LiteralSchema<"right", undefined>, valibot.LiteralSchema<"center", undefined>, valibot.LiteralSchema<"focalpoint", undefined>, valibot.LiteralSchema<"entropy", undefined>], undefined>;
+        readonly download: valibot.UnionSchema<[valibot.StringSchema<undefined>, valibot.BooleanSchema<undefined>], undefined>;
+        readonly dpr: valibot.UnionSchema<[valibot.LiteralSchema<1, undefined>, valibot.LiteralSchema<2, undefined>, valibot.LiteralSchema<3, undefined>], undefined>;
+        readonly fit: valibot.UnionSchema<[valibot.LiteralSchema<"clip", undefined>, valibot.LiteralSchema<"crop", undefined>, valibot.LiteralSchema<"fill", undefined>, valibot.LiteralSchema<"fillmax", undefined>, valibot.LiteralSchema<"max", undefined>, valibot.LiteralSchema<"scale", undefined>, valibot.LiteralSchema<"min", undefined>], undefined>;
+        readonly flipHorizontal: valibot.BooleanSchema<undefined>;
+        readonly flipVertical: valibot.BooleanSchema<undefined>;
+        readonly focalPoint: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+        readonly format: valibot.UnionSchema<[valibot.LiteralSchema<"jpg", undefined>, valibot.LiteralSchema<"pjpg", undefined>, valibot.LiteralSchema<"png", undefined>, valibot.LiteralSchema<"webp", undefined>], undefined>;
+        readonly frame: valibot.NumberSchema<undefined>;
+        readonly height: valibot.NumberSchema<undefined>;
+        readonly invert: valibot.BooleanSchema<undefined>;
+        readonly maxHeight: valibot.NumberSchema<undefined>;
+        readonly maxWidth: valibot.NumberSchema<undefined>;
+        readonly minHeight: valibot.NumberSchema<undefined>;
+        readonly minWidth: valibot.NumberSchema<undefined>;
+        readonly orientation: valibot.UnionSchema<[valibot.LiteralSchema<0, undefined>, valibot.LiteralSchema<90, undefined>, valibot.LiteralSchema<180, undefined>, valibot.LiteralSchema<270, undefined>], undefined>;
+        readonly pad: valibot.NumberSchema<undefined>;
+        readonly quality: valibot.NumberSchema<undefined>;
+        readonly rect: valibot.ObjectSchema<{
+            readonly pos: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+            readonly size: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+        }, undefined>;
+        readonly saturation: valibot.NumberSchema<undefined>;
+        readonly sharpen: valibot.NumberSchema<undefined>;
+        readonly width: valibot.NumberSchema<undefined>;
+    }, undefined>, "~types" | "~run" | "~standard" | "entries"> & {
+        readonly entries: {
+            readonly auto: valibot.OptionalSchema<valibot.LiteralSchema<"format", undefined>, undefined>;
+            readonly background: valibot.OptionalSchema<valibot.StringSchema<undefined>, undefined>;
+            readonly blur: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly crop: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<"top", undefined>, valibot.LiteralSchema<"bottom", undefined>, valibot.LiteralSchema<"left", undefined>, valibot.LiteralSchema<"right", undefined>, valibot.LiteralSchema<"center", undefined>, valibot.LiteralSchema<"focalpoint", undefined>, valibot.LiteralSchema<"entropy", undefined>], undefined>, undefined>;
+            readonly download: valibot.OptionalSchema<valibot.UnionSchema<[valibot.StringSchema<undefined>, valibot.BooleanSchema<undefined>], undefined>, undefined>;
+            readonly dpr: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<1, undefined>, valibot.LiteralSchema<2, undefined>, valibot.LiteralSchema<3, undefined>], undefined>, undefined>;
+            readonly fit: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<"clip", undefined>, valibot.LiteralSchema<"crop", undefined>, valibot.LiteralSchema<"fill", undefined>, valibot.LiteralSchema<"fillmax", undefined>, valibot.LiteralSchema<"max", undefined>, valibot.LiteralSchema<"scale", undefined>, valibot.LiteralSchema<"min", undefined>], undefined>, undefined>;
+            readonly flipHorizontal: valibot.OptionalSchema<valibot.BooleanSchema<undefined>, undefined>;
+            readonly flipVertical: valibot.OptionalSchema<valibot.BooleanSchema<undefined>, undefined>;
+            readonly focalPoint: valibot.OptionalSchema<valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>, undefined>;
+            readonly format: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<"jpg", undefined>, valibot.LiteralSchema<"pjpg", undefined>, valibot.LiteralSchema<"png", undefined>, valibot.LiteralSchema<"webp", undefined>], undefined>, undefined>;
+            readonly frame: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly height: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly invert: valibot.OptionalSchema<valibot.BooleanSchema<undefined>, undefined>;
+            readonly maxHeight: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly maxWidth: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly minHeight: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly minWidth: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly orientation: valibot.OptionalSchema<valibot.UnionSchema<[valibot.LiteralSchema<0, undefined>, valibot.LiteralSchema<90, undefined>, valibot.LiteralSchema<180, undefined>, valibot.LiteralSchema<270, undefined>], undefined>, undefined>;
+            readonly pad: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly quality: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly rect: valibot.OptionalSchema<valibot.ObjectSchema<{
+                readonly pos: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+                readonly size: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+            }, undefined>, undefined>;
+            readonly saturation: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly sharpen: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+            readonly width: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+        };
+        readonly '~standard': valibot.StandardProps<{
+            auto?: "format" | undefined;
+            background?: string | undefined;
+            blur?: number | undefined;
+            crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+            download?: string | boolean | undefined;
+            dpr?: 1 | 2 | 3 | undefined;
+            fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+            flipHorizontal?: boolean | undefined;
+            flipVertical?: boolean | undefined;
+            focalPoint?: [number, number] | undefined;
+            format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+            frame?: number | undefined;
+            height?: number | undefined;
+            invert?: boolean | undefined;
+            maxHeight?: number | undefined;
+            maxWidth?: number | undefined;
+            minHeight?: number | undefined;
+            minWidth?: number | undefined;
+            orientation?: 0 | 90 | 180 | 270 | undefined;
+            pad?: number | undefined;
+            quality?: number | undefined;
+            rect?: {
+                pos: [number, number];
+                size: [number, number];
+            } | undefined;
+            saturation?: number | undefined;
+            sharpen?: number | undefined;
+            width?: number | undefined;
+        }, {
+            auto?: "format" | undefined;
+            background?: string | undefined;
+            blur?: number | undefined;
+            crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+            download?: string | boolean | undefined;
+            dpr?: 1 | 2 | 3 | undefined;
+            fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+            flipHorizontal?: boolean | undefined;
+            flipVertical?: boolean | undefined;
+            focalPoint?: [number, number] | undefined;
+            format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+            frame?: number | undefined;
+            height?: number | undefined;
+            invert?: boolean | undefined;
+            maxHeight?: number | undefined;
+            maxWidth?: number | undefined;
+            minHeight?: number | undefined;
+            minWidth?: number | undefined;
+            orientation?: 0 | 90 | 180 | 270 | undefined;
+            pad?: number | undefined;
+            quality?: number | undefined;
+            rect?: {
+                pos: [number, number];
+                size: [number, number];
+            } | undefined;
+            saturation?: number | undefined;
+            sharpen?: number | undefined;
+            width?: number | undefined;
+        }>;
+        readonly '~run': (dataset: valibot.UnknownDataset, config: valibot.Config<valibot.BaseIssue<unknown>>) => valibot.OutputDataset<{
+            auto?: "format" | undefined;
+            background?: string | undefined;
+            blur?: number | undefined;
+            crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+            download?: string | boolean | undefined;
+            dpr?: 1 | 2 | 3 | undefined;
+            fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+            flipHorizontal?: boolean | undefined;
+            flipVertical?: boolean | undefined;
+            focalPoint?: [number, number] | undefined;
+            format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+            frame?: number | undefined;
+            height?: number | undefined;
+            invert?: boolean | undefined;
+            maxHeight?: number | undefined;
+            maxWidth?: number | undefined;
+            minHeight?: number | undefined;
+            minWidth?: number | undefined;
+            orientation?: 0 | 90 | 180 | 270 | undefined;
+            pad?: number | undefined;
+            quality?: number | undefined;
+            rect?: {
+                pos: [number, number];
+                size: [number, number];
+            } | undefined;
+            saturation?: number | undefined;
+            sharpen?: number | undefined;
+            width?: number | undefined;
+        }, valibot.NumberIssue | valibot.ObjectIssue | valibot.TupleIssue | valibot.StringIssue | valibot.LiteralIssue | valibot.UnionIssue<valibot.LiteralIssue> | valibot.BooleanIssue | valibot.UnionIssue<valibot.StringIssue | valibot.BooleanIssue>>;
+        readonly '~types'?: {
+            readonly input: {
+                auto?: "format" | undefined;
+                background?: string | undefined;
+                blur?: number | undefined;
+                crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+                download?: string | boolean | undefined;
+                dpr?: 1 | 2 | 3 | undefined;
+                fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+                flipHorizontal?: boolean | undefined;
+                flipVertical?: boolean | undefined;
+                focalPoint?: [number, number] | undefined;
+                format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+                frame?: number | undefined;
+                height?: number | undefined;
+                invert?: boolean | undefined;
+                maxHeight?: number | undefined;
+                maxWidth?: number | undefined;
+                minHeight?: number | undefined;
+                minWidth?: number | undefined;
+                orientation?: 0 | 90 | 180 | 270 | undefined;
+                pad?: number | undefined;
+                quality?: number | undefined;
+                rect?: {
+                    pos: [number, number];
+                    size: [number, number];
+                } | undefined;
+                saturation?: number | undefined;
+                sharpen?: number | undefined;
+                width?: number | undefined;
+            };
+            readonly output: {
+                auto?: "format" | undefined;
+                background?: string | undefined;
+                blur?: number | undefined;
+                crop?: "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy" | undefined;
+                download?: string | boolean | undefined;
+                dpr?: 1 | 2 | 3 | undefined;
+                fit?: "fill" | "crop" | "clip" | "fillmax" | "max" | "scale" | "min" | undefined;
+                flipHorizontal?: boolean | undefined;
+                flipVertical?: boolean | undefined;
+                focalPoint?: [number, number] | undefined;
+                format?: "jpg" | "pjpg" | "png" | "webp" | undefined;
+                frame?: number | undefined;
+                height?: number | undefined;
+                invert?: boolean | undefined;
+                maxHeight?: number | undefined;
+                maxWidth?: number | undefined;
+                minHeight?: number | undefined;
+                minWidth?: number | undefined;
+                orientation?: 0 | 90 | 180 | 270 | undefined;
+                pad?: number | undefined;
+                quality?: number | undefined;
+                rect?: {
+                    pos: [number, number];
+                    size: [number, number];
+                } | undefined;
+                saturation?: number | undefined;
+                sharpen?: number | undefined;
+                width?: number | undefined;
+            };
+            readonly issue: valibot.NumberIssue | valibot.ObjectIssue | valibot.TupleIssue | valibot.StringIssue | valibot.LiteralIssue | valibot.UnionIssue<valibot.LiteralIssue> | valibot.BooleanIssue | valibot.UnionIssue<valibot.StringIssue | valibot.BooleanIssue>;
+        } | undefined;
+    }, undefined>;
+}, undefined>;
+declare function isAssetLike(input: unknown): input is AssetLike;
+declare function isReferenceLike(input: unknown): input is ReferenceLike;
+declare function isImageObject(input: unknown): input is ImageObject;
+declare function isImageAsset(input: unknown): input is ImageAsset;
+declare function assetIdFromSource(source: ImageSource): string | undefined;
+declare function parseAssetId(id: string): ImageAsset | undefined;
+declare function imageAssetFromSource(source: ImageSource): ImageAsset | undefined;
+declare function imageAssetWithTransformations(asset: ImageAsset, transformations: Transformations): ImageAsset;
+
+declare const srcsetWidths: {
+    default: number[];
+    expanded: number[];
+};
+
+declare const cropSchema: valibot.ObjectSchema<{
+    readonly top: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    readonly bottom: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    readonly left: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    readonly right: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+}, undefined>;
+type Crop = InferOutput<typeof cropSchema>;
+declare function isCrop(input: unknown): input is Crop;
+
+declare const hotspotSchema: valibot.ObjectSchema<{
+    readonly x: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    readonly y: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    readonly width: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+    readonly height: valibot.OptionalSchema<valibot.NumberSchema<undefined>, undefined>;
+}, undefined>;
+type Hotspot = InferOutput<typeof hotspotSchema>;
+declare function isHotspot(input: unknown): input is Hotspot;
+
+interface SanityClientLike {
+    projectId: string;
+    dataset: string;
+}
+declare function imageUrl(client: SanityClientLike, asset: ImageAsset): string;
+declare function imageSrcset(client: SanityClientLike, asset: ImageAsset, widths?: number[]): string | undefined;
+/**
+ * Calculates the aspect ratio of an image, taking its transformations into account.
+ * @param asset - The asset to calculate the aspect ratio of
+ * @returns The aspect ratio of the image
+ * @todo This function currently ignores the `crop` mode settings including focal point
+ * and min/max height/width.
+ */
+declare function imageAspectRatio(asset: ImageAsset): number;
+
+declare const rectSchema: valibot.ObjectSchema<{
+    readonly pos: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+    readonly size: valibot.TupleSchema<[valibot.NumberSchema<undefined>, valibot.NumberSchema<undefined>], undefined>;
+}, undefined>;
+type Rect = InferOutput<typeof rectSchema>;
+declare function isRect(input: unknown): input is Rect;
+declare function rectFromCrop(asset: Pick<ImageAsset, "width" | "height">, crop: Crop): Rect;
+
+export { type AssetLike, type Crop, type Hotspot, type ImageAsset, type ImageObject, type ImageSource, type Rect, type ReferenceLike, type SanityClientLike, type Transformations, assetIdFromSource, assetLikeSchema, cropSchema, hotspotSchema, imageAspectRatio, imageAssetFromSource, imageAssetSchema, imageAssetWithTransformations, imageObjectSchema, imageSrcset, imageUrl, isAssetLike, isCrop, isHotspot, isImageAsset, isImageObject, isRect, isReferenceLike, isTransformations, parseAssetId, rectFromCrop, rectSchema, referenceLikeSchema, srcsetWidths, transformationsSchema, transformationsToURLSearch };

package/dist/index.js

@@ -0,0 +1,333 @@
+// src/asset.ts
+import {
+  is as is5,
+  nullish,
+  number as number5,
+  object as object5,
+  string as string2,
+  union as union2
+} from "valibot";
+
+// src/crop.ts
+import { is, number, object, optional } from "valibot";
+var cropSchema = object({
+  top: optional(number()),
+  bottom: optional(number()),
+  left: optional(number()),
+  right: optional(number())
+});
+function isCrop(input) {
+  return is(cropSchema, input);
+}
+
+// src/hotspot.ts
+import { is as is2, number as number2, object as object2, optional as optional2 } from "valibot";
+var hotspotSchema = object2({
+  x: optional2(number2()),
+  y: optional2(number2()),
+  width: optional2(number2()),
+  height: optional2(number2())
+});
+function isHotspot(input) {
+  return is2(hotspotSchema, input);
+}
+
+// src/rect.ts
+import { is as is3, number as number3, object as object3, tuple } from "valibot";
+var rectSchema = object3({
+  pos: tuple([number3(), number3()]),
+  size: tuple([number3(), number3()])
+});
+function isRect(input) {
+  return is3(rectSchema, input);
+}
+function rectFromCrop(asset, crop) {
+  const left = Math.max(crop.left ?? 0, 0);
+  const right = Math.max(crop.right ?? 0, 0);
+  const top = Math.max(crop.top ?? 0, 0);
+  const bottom = Math.max(crop.bottom ?? 0, 0);
+  return {
+    pos: [left * asset.width, top * asset.height],
+    size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height]
+  };
+}
+
+// src/transformations.ts
+import {
+  boolean,
+  is as is4,
+  literal,
+  number as number4,
+  object as object4,
+  partial,
+  string,
+  tuple as tuple2,
+  union
+} from "valibot";
+var transformationsSchema = partial(
+  object4({
+    auto: literal("format"),
+    background: string(),
+    blur: number4(),
+    crop: union([
+      literal("top"),
+      literal("bottom"),
+      literal("left"),
+      literal("right"),
+      literal("center"),
+      literal("focalpoint"),
+      literal("entropy")
+    ]),
+    download: union([string(), boolean()]),
+    dpr: union([literal(1), literal(2), literal(3)]),
+    fit: union([
+      literal("clip"),
+      literal("crop"),
+      literal("fill"),
+      literal("fillmax"),
+      literal("max"),
+      literal("scale"),
+      literal("min")
+    ]),
+    flipHorizontal: boolean(),
+    flipVertical: boolean(),
+    focalPoint: tuple2([number4(), number4()]),
+    format: union([
+      literal("jpg"),
+      literal("pjpg"),
+      literal("png"),
+      literal("webp")
+    ]),
+    frame: number4(),
+    height: number4(),
+    invert: boolean(),
+    maxHeight: number4(),
+    maxWidth: number4(),
+    minHeight: number4(),
+    minWidth: number4(),
+    orientation: union([literal(0), literal(90), literal(180), literal(270)]),
+    pad: number4(),
+    quality: number4(),
+    rect: rectSchema,
+    saturation: number4(),
+    sharpen: number4(),
+    width: number4()
+  })
+);
+function isTransformations(input) {
+  return is4(transformationsSchema, input);
+}
+function entry(key, value) {
+  return value == null || value === false ? void 0 : [key, String(typeof value === "number" ? Math.round(value) : value)];
+}
+function transformationsToURLSearch({
+  auto,
+  background,
+  blur,
+  crop,
+  download,
+  dpr,
+  fit,
+  flipHorizontal,
+  flipVertical,
+  focalPoint,
+  format,
+  frame,
+  height,
+  invert,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  orientation,
+  pad,
+  quality,
+  rect,
+  saturation,
+  sharpen,
+  width
+}) {
+  return "?" + [
+    entry("auto", auto),
+    entry("bg", background),
+    entry("blur", blur),
+    entry("crop", crop),
+    entry("dl", download),
+    entry("dpr", dpr),
+    entry("fit", fit),
+    entry(
+      "flip",
+      flipHorizontal || flipVertical ? [flipHorizontal && "h", flipVertical && "v"].filter(Boolean).join("") : void 0
+    ),
+    entry("fm", format),
+    entry("fp-x", focalPoint?.[0]),
+    entry("fp-y", focalPoint?.[1]),
+    entry("frame", frame),
+    entry("h", height),
+    entry("invert", invert),
+    entry("max-h", maxHeight),
+    entry("max-w", maxWidth),
+    entry("min-h", minHeight),
+    entry("min-w", minWidth),
+    entry("or", orientation),
+    entry("pad", pad),
+    entry("q", quality),
+    entry(
+      "rect",
+      rect ? [rect.pos[0], rect.pos[1], rect.size[0], rect.size[1]].map(Math.round).join(",") : void 0
+    ),
+    entry("sat", saturation),
+    entry("sharp", sharpen),
+    entry("w", width)
+  ].filter((entry2) => entry2 != null).map((entry2) => entry2.join("=")).join("&");
+}
+
+// src/asset.ts
+var assetLikeSchema = object5({
+  _id: string2()
+});
+var referenceLikeSchema = object5({
+  _ref: string2()
+});
+var imageObjectSchema = object5({
+  asset: nullish(union2([assetLikeSchema, referenceLikeSchema, string2()])),
+  crop: nullish(cropSchema),
+  hotspot: nullish(hotspotSchema)
+});
+var imageAssetSchema = object5({
+  _id: string2(),
+  assetId: string2(),
+  width: number5(),
+  height: number5(),
+  extension: string2(),
+  vanityName: nullish(string2()),
+  transformations: nullish(transformationsSchema)
+});
+function isAssetLike(input) {
+  return is5(assetLikeSchema, input);
+}
+function isReferenceLike(input) {
+  return is5(referenceLikeSchema, input);
+}
+function isImageObject(input) {
+  return is5(imageObjectSchema, input);
+}
+function isImageAsset(input) {
+  return is5(imageAssetSchema, input);
+}
+function assetIdFromSource(source) {
+  return typeof source === "string" ? source : isAssetLike(source) ? source._id : isReferenceLike(source) ? source._ref : isImageObject(source) && source.asset ? assetIdFromSource(source.asset) : void 0;
+}
+function parseAssetId(id) {
+  const matches = id.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+  if (matches) {
+    const [, assetId, width, height, extension] = matches;
+    return {
+      _id: id,
+      assetId,
+      width: Number(width),
+      height: Number(height),
+      extension
+    };
+  }
+}
+function imageAssetFromSource(source) {
+  if (isImageAsset(source)) {
+    return source;
+  } else {
+    const id = assetIdFromSource(source);
+    const asset = id ? parseAssetId(id) : void 0;
+    return asset ? imageAssetWithTransformations(asset, {
+      rect: typeof source === "object" && "crop" in source && source.crop ? rectFromCrop(asset, source.crop) : void 0
+    }) : void 0;
+  }
+}
+function imageAssetWithTransformations(asset, transformations) {
+  return {
+    ...asset,
+    transformations: { ...asset.transformations, ...transformations }
+  };
+}
+
+// src/constants.ts
+var srcsetWidths = {
+  default: [2560, 1920, 1280, 960, 640, 480, 360, 240],
+  expanded: [
+    3840,
+    3200,
+    2560,
+    2048,
+    1920,
+    1668,
+    1280,
+    1080,
+    960,
+    720,
+    640,
+    480,
+    360,
+    240
+  ]
+};
+
+// src/image.ts
+function imageUrl(client, asset) {
+  const url = new URL(
+    [
+      "https://cdn.sanity.io/images",
+      client.projectId,
+      client.dataset,
+      `${asset.assetId}-${asset.width}x${asset.height}.${asset.extension}`,
+      asset.vanityName
+    ].filter(Boolean).join("/")
+  );
+  if (asset.transformations) {
+    url.search = transformationsToURLSearch(asset.transformations);
+  }
+  return url.href;
+}
+function imageSrcset(client, asset, widths = srcsetWidths.default) {
+  return widths.sort((a, b) => a - b).filter((width) => width < asset.width).map(Math.round).map((width) => {
+    const url = imageUrl(
+      client,
+      imageAssetWithTransformations(asset, {
+        width
+      })
+    );
+    return `${url} ${width}w`;
+  }).join(",");
+}
+function imageAspectRatio(asset) {
+  const size = asset.transformations && ["crop", "fill", "fillmax", "scale", "min"].includes(
+    asset.transformations.fit ?? ""
+  ) && asset.transformations.width != null && asset.transformations.height != null ? [asset.transformations.width, asset.transformations.height] : asset.transformations?.rect ? asset.transformations.rect.size : [asset.width, asset.height];
+  return size[0] / size[1];
+}
+export {
+  assetIdFromSource,
+  assetLikeSchema,
+  cropSchema,
+  hotspotSchema,
+  imageAspectRatio,
+  imageAssetFromSource,
+  imageAssetSchema,
+  imageAssetWithTransformations,
+  imageObjectSchema,
+  imageSrcset,
+  imageUrl,
+  isAssetLike,
+  isCrop,
+  isHotspot,
+  isImageAsset,
+  isImageObject,
+  isRect,
+  isReferenceLike,
+  isTransformations,
+  parseAssetId,
+  rectFromCrop,
+  rectSchema,
+  referenceLikeSchema,
+  srcsetWidths,
+  transformationsSchema,
+  transformationsToURLSearch
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@nonphoto/sanity-image",
+  "version": "0.0.0",
+  "author": "Jonas Luebbers <jonas@jonasluebbers.com> (https://www.jonasluebbers.com)",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "./dist/*",
+    "./src/*"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "devDependencies": {
+    "semantic-release": "25.0.2",
+    "tsup": "8.5.0",
+    "typescript": "5.9.2"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "valibot": "^1.1.0"
+  },
+  "scripts": {
+    "build": "tsup ./src/index.ts --dts --format esm --clean",
+    "release": "semantic-release"
+  }
+}

package/src/asset.ts

@@ -0,0 +1,123 @@
+import {
+  InferOutput,
+  is,
+  nullish,
+  number,
+  object,
+  string,
+  union,
+} from "valibot";
+import { cropSchema } from "./crop";
+import { hotspotSchema } from "./hotspot";
+import { rectFromCrop } from "./rect";
+import { Transformations, transformationsSchema } from "./transformations";
+
+export type ImageSource =
+  | ImageObject
+  | ImageAsset
+  | AssetLike
+  | ReferenceLike
+  | string;
+
+export type AssetLike = InferOutput<typeof assetLikeSchema>;
+
+export type ReferenceLike = InferOutput<typeof referenceLikeSchema>;
+
+export type ImageObject = InferOutput<typeof imageObjectSchema>;
+
+export type ImageAsset = InferOutput<typeof imageAssetSchema>;
+
+export const assetLikeSchema = object({
+  _id: string(),
+});
+
+export const referenceLikeSchema = object({
+  _ref: string(),
+});
+
+export const imageObjectSchema = object({
+  asset: nullish(union([assetLikeSchema, referenceLikeSchema, string()])),
+  crop: nullish(cropSchema),
+  hotspot: nullish(hotspotSchema),
+});
+
+export const imageAssetSchema = object({
+  _id: string(),
+  assetId: string(),
+  width: number(),
+  height: number(),
+  extension: string(),
+  vanityName: nullish(string()),
+  transformations: nullish(transformationsSchema),
+});
+
+export function isAssetLike(input: unknown): input is AssetLike {
+  return is(assetLikeSchema, input);
+}
+
+export function isReferenceLike(input: unknown): input is ReferenceLike {
+  return is(referenceLikeSchema, input);
+}
+
+export function isImageObject(input: unknown): input is ImageObject {
+  return is(imageObjectSchema, input);
+}
+
+export function isImageAsset(input: unknown): input is ImageAsset {
+  return is(imageAssetSchema, input);
+}
+
+export function assetIdFromSource(source: ImageSource): string | undefined {
+  return typeof source === "string"
+    ? source
+    : isAssetLike(source)
+      ? source._id
+      : isReferenceLike(source)
+        ? source._ref
+        : isImageObject(source) && source.asset
+          ? assetIdFromSource(source.asset)
+          : undefined;
+}
+
+export function parseAssetId(id: string): ImageAsset | undefined {
+  const matches = id.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+  if (matches) {
+    const [, assetId, width, height, extension] = matches;
+    return {
+      _id: id,
+      assetId,
+      width: Number(width),
+      height: Number(height),
+      extension,
+    };
+  }
+}
+
+export function imageAssetFromSource(
+  source: ImageSource,
+): ImageAsset | undefined {
+  if (isImageAsset(source)) {
+    return source;
+  } else {
+    const id = assetIdFromSource(source);
+    const asset = id ? parseAssetId(id) : undefined;
+    return asset
+      ? imageAssetWithTransformations(asset, {
+          rect:
+            typeof source === "object" && "crop" in source && source.crop
+              ? rectFromCrop(asset, source.crop)
+              : undefined,
+        })
+      : undefined;
+  }
+}
+
+export function imageAssetWithTransformations(
+  asset: ImageAsset,
+  transformations: Transformations,
+): ImageAsset {
+  return {
+    ...asset,
+    transformations: { ...asset.transformations, ...transformations },
+  };
+}

package/src/constants.ts

@@ -0,0 +1,7 @@
+export const srcsetWidths = {
+  default: [2560, 1920, 1280, 960, 640, 480, 360, 240],
+  expanded: [
+    3840, 3200, 2560, 2048, 1920, 1668, 1280, 1080, 960, 720, 640, 480, 360,
+    240,
+  ],
+};

package/src/crop.ts

@@ -0,0 +1,14 @@
+import { InferOutput, is, number, object, optional } from "valibot";
+
+export const cropSchema = object({
+  top: optional(number()),
+  bottom: optional(number()),
+  left: optional(number()),
+  right: optional(number()),
+});
+
+export type Crop = InferOutput<typeof cropSchema>;
+
+export function isCrop(input: unknown): input is Crop {
+  return is(cropSchema, input);
+}

package/src/hotspot.ts

@@ -0,0 +1,14 @@
+import { InferOutput, is, number, object, optional } from "valibot";
+
+export const hotspotSchema = object({
+  x: optional(number()),
+  y: optional(number()),
+  width: optional(number()),
+  height: optional(number()),
+});
+
+export type Hotspot = InferOutput<typeof hotspotSchema>;
+
+export function isHotspot(input: unknown): input is Hotspot {
+  return is(hotspotSchema, input);
+}

package/src/image.ts

@@ -0,0 +1,69 @@
+import { ImageAsset, imageAssetWithTransformations } from "./asset";
+import { srcsetWidths } from "./constants";
+import { transformationsToURLSearch } from "./transformations";
+
+export interface SanityClientLike {
+  projectId: string;
+  dataset: string;
+}
+
+export function imageUrl(client: SanityClientLike, asset: ImageAsset): string {
+  const url = new URL(
+    [
+      "https://cdn.sanity.io/images",
+      client.projectId,
+      client.dataset,
+      `${asset.assetId}-${asset.width}x${asset.height}.${asset.extension}`,
+      asset.vanityName,
+    ]
+      .filter(Boolean)
+      .join("/"),
+  );
+  if (asset.transformations) {
+    url.search = transformationsToURLSearch(asset.transformations);
+  }
+  return url.href;
+}
+
+export function imageSrcset(
+  client: SanityClientLike,
+  asset: ImageAsset,
+  widths: number[] = srcsetWidths.default,
+): string | undefined {
+  return widths
+    .sort((a, b) => a - b)
+    .filter((width) => width < asset.width)
+    .map(Math.round)
+    .map((width) => {
+      const url = imageUrl(
+        client,
+        imageAssetWithTransformations(asset, {
+          width,
+        }),
+      );
+      return `${url} ${width}w`;
+    })
+    .join(",");
+}
+
+/**
+ * Calculates the aspect ratio of an image, taking its transformations into account.
+ * @param asset - The asset to calculate the aspect ratio of
+ * @returns The aspect ratio of the image
+ * @todo This function currently ignores the `crop` mode settings including focal point
+ * and min/max height/width.
+ */
+export function imageAspectRatio(asset: ImageAsset): number {
+  const size: [number, number] =
+    asset.transformations &&
+    ["crop", "fill", "fillmax", "scale", "min"].includes(
+      asset.transformations.fit ?? "",
+    ) &&
+    asset.transformations.width != null &&
+    asset.transformations.height != null
+      ? [asset.transformations.width, asset.transformations.height]
+      : asset.transformations?.rect
+        ? asset.transformations.rect.size
+        : [asset.width, asset.height];
+  return size[0] / size[1];
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./asset";
+export * from "./constants";
+export * from "./crop";
+export * from "./hotspot";
+export * from "./image";
+export * from "./rect";
+export * from "./transformations";

package/src/rect.ts

@@ -0,0 +1,28 @@
+import { InferOutput, is, number, object, tuple } from "valibot";
+import { ImageAsset } from "./asset";
+import { Crop } from "./crop";
+
+export const rectSchema = object({
+  pos: tuple([number(), number()]),
+  size: tuple([number(), number()]),
+});
+
+export type Rect = InferOutput<typeof rectSchema>;
+
+export function isRect(input: unknown): input is Rect {
+  return is(rectSchema, input);
+}
+
+export function rectFromCrop(
+  asset: Pick<ImageAsset, "width" | "height">,
+  crop: Crop,
+): Rect {
+  const left = Math.max(crop.left ?? 0, 0);
+  const right = Math.max(crop.right ?? 0, 0);
+  const top = Math.max(crop.top ?? 0, 0);
+  const bottom = Math.max(crop.bottom ?? 0, 0);
+  return {
+    pos: [left * asset.width, top * asset.height],
+    size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height],
+  };
+}

package/src/transformations.ts

@@ -0,0 +1,155 @@
+import {
+  boolean,
+  InferOutput,
+  is,
+  literal,
+  number,
+  object,
+  partial,
+  string,
+  tuple,
+  union,
+} from "valibot";
+import { rectSchema } from "./rect";
+
+export const transformationsSchema = partial(
+  object({
+    auto: literal("format"),
+    background: string(),
+    blur: number(),
+    crop: union([
+      literal("top"),
+      literal("bottom"),
+      literal("left"),
+      literal("right"),
+      literal("center"),
+      literal("focalpoint"),
+      literal("entropy"),
+    ]),
+    download: union([string(), boolean()]),
+    dpr: union([literal(1), literal(2), literal(3)]),
+    fit: union([
+      literal("clip"),
+      literal("crop"),
+      literal("fill"),
+      literal("fillmax"),
+      literal("max"),
+      literal("scale"),
+      literal("min"),
+    ]),
+    flipHorizontal: boolean(),
+    flipVertical: boolean(),
+    focalPoint: tuple([number(), number()]),
+    format: union([
+      literal("jpg"),
+      literal("pjpg"),
+      literal("png"),
+      literal("webp"),
+    ]),
+    frame: number(),
+    height: number(),
+    invert: boolean(),
+    maxHeight: number(),
+    maxWidth: number(),
+    minHeight: number(),
+    minWidth: number(),
+    orientation: union([literal(0), literal(90), literal(180), literal(270)]),
+    pad: number(),
+    quality: number(),
+    rect: rectSchema,
+    saturation: number(),
+    sharpen: number(),
+    width: number(),
+  }),
+);
+
+export type Transformations = InferOutput<typeof transformationsSchema>;
+
+export function isTransformations(input: unknown): input is Transformations {
+  return is(transformationsSchema, input);
+}
+
+function entry(
+  key: string,
+  value: string | number | boolean | null | undefined,
+): [string, string] | undefined {
+  return value == null || value === false
+    ? undefined
+    : [key, String(typeof value === "number" ? Math.round(value) : value)];
+}
+
+export function transformationsToURLSearch({
+  auto,
+  background,
+  blur,
+  crop,
+  download,
+  dpr,
+  fit,
+  flipHorizontal,
+  flipVertical,
+  focalPoint,
+  format,
+  frame,
+  height,
+  invert,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  orientation,
+  pad,
+  quality,
+  rect,
+  saturation,
+  sharpen,
+  width,
+}: Transformations): string {
+  return (
+    "?" +
+    [
+      entry("auto", auto),
+      entry("bg", background),
+      entry("blur", blur),
+      entry("crop", crop),
+      entry("dl", download),
+      entry("dpr", dpr),
+      entry("fit", fit),
+      entry(
+        "flip",
+        flipHorizontal || flipVertical
+          ? [flipHorizontal && "h", flipVertical && "v"]
+              .filter(Boolean)
+              .join("")
+          : undefined,
+      ),
+      entry("fm", format),
+      entry("fp-x", focalPoint?.[0]),
+      entry("fp-y", focalPoint?.[1]),
+      entry("frame", frame),
+      entry("h", height),
+      entry("invert", invert),
+      entry("max-h", maxHeight),
+      entry("max-w", maxWidth),
+      entry("min-h", minHeight),
+      entry("min-w", minWidth),
+      entry("or", orientation),
+      entry("pad", pad),
+      entry("q", quality),
+      entry(
+        "rect",
+        rect
+          ? [rect.pos[0], rect.pos[1], rect.size[0], rect.size[1]]
+              .map(Math.round)
+              .join(",")
+          : undefined,
+      ),
+      entry("sat", saturation),
+      entry("sharp", sharpen),
+      entry("w", width),
+    ]
+      .filter((entry) => entry != null)
+      .map((entry) => entry.join("="))
+      .join("&")
+  );
+}