@nonphoto/sanity-image 2.1.0 → 3.1.0

package/dist/index.d.ts

@@ -1,208 +1,112 @@
-type ImageUrlBuilderOptions = Partial<SanityProjectDetails> & {
-    baseUrl?: string;
-    source?: SanityImageSource;
-    bg?: string;
-    dpr?: number;
-    width?: number;
-    height?: number;
+interface SanityImageAssetLike {
+    _id: string;
+}
+declare function isSanityImageAssetLike(x: any): x is SanityImageAssetLike;
+
+interface SanityReference {
+    _ref: string;
+}
+declare function isSanityReference(x: any): x is SanityReference;
+
+interface SanityImageObject {
+    asset: SanityImageAssetLike | SanityReference;
+}
+declare function isSanityImageObject(x: any): x is SanityImageObject;
+
+interface SanityImagePaletteSwatch {
+    _type?: "sanity.imagePaletteSwatch" | null;
+    background?: string | null;
+    foreground?: string | null;
+    population?: number | null;
+    title?: string | null;
+}
+interface SanityImagePalette {
+    _type?: "sanity.imagePalette" | null;
+    darkMuted?: SanityImagePaletteSwatch | null;
+    darkVibrant?: SanityImagePaletteSwatch | null;
+    dominant?: SanityImagePaletteSwatch | null;
+    lightMuted?: SanityImagePaletteSwatch | null;
+    lightVibrant?: SanityImagePaletteSwatch | null;
+    muted?: SanityImagePaletteSwatch | null;
+    vibrant?: SanityImagePaletteSwatch | null;
+}
+interface SanityImageDimensions {
+    _type?: "sanity.imageDimensions" | null;
+    aspectRatio?: number | null;
+    width?: number | null;
+    height?: number | null;
+}
+interface SanityImageMetadata {
+    _type: "sanity.imageMetadata";
+    blurHash?: string | null;
+    dimensions?: SanityImageDimensions | null;
+    hasAlpha?: boolean | null;
+    isOpaque?: boolean | null;
+    lqip?: string | null;
+    palette?: SanityImagePalette | null;
+}
+
+type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
+type FitMode = "clip" | "crop" | "fill" | "fillmax" | "max" | "scale" | "min";
+type CropMode = "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy";
+type AutoMode = "format";
+type Orientation = 0 | 90 | 180 | 270;
+type Dpr = 1 | 2 | 3;
+type SanityImageParams = {
+    auto?: AutoMode;
+    background?: string;
+    blur?: number;
+    crop?: CropMode;
+    download?: boolean | string;
+    dpr?: Dpr;
+    fit?: FitMode;
+    flipHorizontal?: boolean;
+    flipVertical?: boolean;
     focalPoint?: {
         x: number;
         y: number;
     };
-    maxWidth?: number;
+    format?: ImageFormat;
+    frame?: number;
+    height?: number;
+    invert?: boolean;
     maxHeight?: number;
-    minWidth?: number;
+    maxWidth?: number;
     minHeight?: number;
-    blur?: number;
-    sharpen?: number;
+    minWidth?: number;
+    orientation?: Orientation;
+    pad?: number;
+    quality?: number;
     rect?: {
         left: number;
         top: number;
         width: number;
         height: number;
     };
-    format?: ImageFormat;
-    invert?: boolean;
-    orientation?: Orientation;
-    quality?: number;
-    download?: boolean | string;
-    flipHorizontal?: boolean;
-    flipVertical?: boolean;
-    ignoreImageParams?: boolean;
-    fit?: FitMode;
-    crop?: CropMode;
     saturation?: number;
-    auto?: AutoMode;
-    pad?: number;
-    vanityName?: string;
-    frame?: number;
-};
-type ImageUrlBuilderOptionsWithAliases = ImageUrlBuilderOptions & {
-    w?: number;
-    h?: number;
-    q?: number;
-    fm?: number;
-    dl?: boolean | string;
-    or?: Orientation;
-    sharp?: number;
-    "min-h"?: number;
-    "max-h"?: number;
-    "min-w"?: number;
-    "max-w"?: number;
-    sat?: number;
-    [key: string]: any;
-};
-type ImageUrlBuilderOptionsWithAsset = ImageUrlBuilderOptions & {
-    asset: {
-        id: string;
-        width: number;
-        height: number;
-        format: string;
-    };
-    [key: string]: any;
-};
-type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
-type FitMode = "clip" | "crop" | "fill" | "fillmax" | "max" | "scale" | "min";
-type CropMode = "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy";
-type AutoMode = "format";
-type Orientation = 0 | 90 | 180 | 270;
-interface SanityClientLike {
-    clientConfig: {
-        dataset?: string;
-        projectId?: string;
-        apiHost?: string;
-    };
-}
-type SanityModernClientLike = {
-    config(): {
-        dataset?: string;
-        projectId?: string;
-        apiHost?: string;
-    };
-};
-declare type SanityImageSource = string | SanityReference | SanityAsset | SanityImageObject | SanityImageWithAssetStub;
-interface SanityProjectDetails {
-    baseUrl?: string;
-    projectId: string;
-    dataset: string;
-}
-interface SanityReference {
-    _ref: string;
-}
-interface SanityImageWithAssetStub {
-    asset: {
-        url: string;
-    };
-}
-interface SanityAsset {
-    _id?: string;
-    url?: string;
-    path?: string;
-    assetId?: string;
-    extension?: string;
-    [key: string]: any;
-}
-interface SanityImageDimensions {
-    aspectRatio: number;
-    height: number;
-    width: number;
-}
-interface SanityImageFitResult {
+    sharpen?: number;
     width?: number;
-    height?: number;
-    rect: SanityImageRect;
-}
-interface SanityImageRect {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-}
-interface SanityImageCrop {
-    _type?: string;
-    left: number;
-    bottom: number;
-    right: number;
-    top: number;
-}
-interface SanityImageHotspot {
-    _type?: string;
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-}
-interface SanityImageObject {
-    asset: SanityReference | SanityAsset;
-    crop?: SanityImageCrop;
-    hotspot?: SanityImageHotspot;
-}
-interface CropSpec {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-}
-interface HotspotSpec {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-}
-interface SanityImageObjectLike extends Pick<SanityImageObject, "asset"> {
-    [key: string]: any;
-}
-interface SanityImageMetadata {
-    lqip?: string;
-    dimensions?: SanityImageDimensions;
-    [key: string]: any;
-}
-interface Size {
-    width: number;
-    height: number;
-}
-
-declare const defaultWidths: number[];
-declare const defaultWidth = 1280;
-declare const defaultQuality = 90;
-declare const fitComparators: {
-    cover: (...values: number[]) => number;
-    contain: (...values: number[]) => number;
 };
-declare function fit(containee: Size, container: Size, mode: keyof typeof fitComparators): {
+declare function sanityImageParamsToSearchParamEntries({ 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, }: SanityImageParams): string[][];
+
+type SanityImageSource = SanityImageObject | SanityReference | SanityImageAssetLike | string;
+interface SanityImageAssetStub {
+    id: string;
     width: number;
     height: number;
-};
-declare function isCrop(x: unknown): x is SanityImageCrop;
-declare function isHotspot(x: unknown): x is SanityImageHotspot;
-declare function isImageObjectLike(x: unknown): x is SanityImageObjectLike;
-declare function isImageObject(x: unknown): x is SanityImageObject;
-declare function isReference(x: unknown): x is SanityReference;
-declare function isAsset(x: unknown): x is SanityAsset;
-declare function isDimensions(x: unknown): x is SanityImageDimensions;
-declare function isSize(x: unknown): x is Size;
-declare function isMetadata(x: unknown): x is SanityImageMetadata;
-interface ImageSrcOptions {
-    client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-    source: SanityImageSource;
-    width: number;
-    quality?: number;
-    aspectRatio?: number;
+    format: string;
+    vanityName?: string;
 }
-declare function imageSrc({ client, source, width, quality, aspectRatio, }: ImageSrcOptions): string;
-interface ImageSrcsetOptions {
-    client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-    source: SanityImageSource;
-    widths?: number[];
-    quality?: number;
-    aspectRatio?: number;
+declare function parseSanityImageAssetId(assetId: string): SanityImageAssetStub | undefined;
+declare function sanityImageAssetId(source: SanityImageSource): string;
+declare function sanityImageAssetStub(source: SanityImageSource): SanityImageAssetStub | undefined;
+
+declare const defaultSrcsetWidths: number[];
+interface SanityClientLike {
+    projectId: string;
+    dataset: string;
 }
-declare function imageSrcset({ client, source, widths, quality, aspectRatio, }: ImageSrcsetOptions): string;
-declare function imageAlt(source: SanityImageSource): string | undefined;
-declare function croppedSize(intrinsicSize: Size, crop: SanityImageCrop): Size;
-declare function aspectRatio(size: Size): number;
-declare function imageMetadata(source: SanityImageSource): SanityImageMetadata | undefined;
-declare function imageCroppedSize(source: SanityImageSource): Size | undefined;
-declare function imageAspectRatio(source: SanityImageSource): number | undefined;
+declare function sanityImageUrl(client: SanityClientLike, image: SanityImageAssetStub, params?: SanityImageParams): string;
+declare function sanityImageSrcset(client: SanityClientLike, image: SanityImageAssetStub, params?: Omit<SanityImageParams, "width">, widths?: number[]): string;
 
-export { type AutoMode, type CropMode, type CropSpec, type FitMode, type HotspotSpec, type ImageFormat, type ImageSrcOptions, type ImageSrcsetOptions, type ImageUrlBuilderOptions, type ImageUrlBuilderOptionsWithAliases, type ImageUrlBuilderOptionsWithAsset, type Orientation, type SanityAsset, type SanityClientLike, type SanityImageCrop, type SanityImageDimensions, type SanityImageFitResult, type SanityImageHotspot, type SanityImageMetadata, type SanityImageObject, type SanityImageObjectLike, type SanityImageRect, type SanityImageSource, type SanityImageWithAssetStub, type SanityModernClientLike, type SanityProjectDetails, type SanityReference, type Size, aspectRatio, croppedSize, defaultQuality, defaultWidth, defaultWidths, fit, fitComparators, imageAlt, imageAspectRatio, imageCroppedSize, imageMetadata, imageSrc, imageSrcset, isAsset, isCrop, isDimensions, isHotspot, isImageObject, isImageObjectLike, isMetadata, isReference, isSize };
+export { type AutoMode, type CropMode, type Dpr, type FitMode, type ImageFormat, type Orientation, type SanityClientLike, type SanityImageAssetLike, type SanityImageAssetStub, type SanityImageDimensions, type SanityImageMetadata, type SanityImageObject, type SanityImagePalette, type SanityImagePaletteSwatch, type SanityImageParams, type SanityImageSource, type SanityReference, defaultSrcsetWidths, isSanityImageAssetLike, isSanityImageObject, isSanityReference, parseSanityImageAssetId, sanityImageAssetId, sanityImageAssetStub, sanityImageParamsToSearchParamEntries, sanityImageSrcset, sanityImageUrl };

package/dist/index.js

@@ -1,6 +1,98 @@
-// src/index.ts
-import imageUrlBuilder from "@sanity/image-url";
-var defaultWidths = [
+// src/asset.ts
+function isSanityImageAssetLike(x) {
+  return x != null && typeof x === "object" && "_id" in x && typeof x._id === "string";
+}
+
+// src/reference.ts
+function isSanityReference(x) {
+  return x != null && typeof x === "object" && "_ref" in x && typeof x._ref === "string";
+}
+
+// src/imageObject.ts
+function isSanityImageObject(x) {
+  return x != null && typeof x === "object" && "asset" in x && (isSanityImageAssetLike(x.asset) || isSanityReference(x.asset));
+}
+
+// src/params.ts
+function sanityImageParamsToSearchParamEntries({
+  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 Object.entries({
+    auto,
+    bg: background,
+    blur,
+    crop,
+    dl: download,
+    dpr,
+    fit,
+    flip: [flipHorizontal && "h", flipVertical && "v"].filter(Boolean).join(""),
+    fm: format,
+    "fp-x": focalPoint?.x,
+    "fp-y": focalPoint?.y,
+    frame,
+    h: height,
+    invert,
+    "max-h": maxHeight,
+    "max-w": maxWidth,
+    "min-h": minHeight,
+    "min-w": minWidth,
+    or: orientation,
+    pad,
+    q: quality,
+    rect: rect ? [rect.left, rect.top, rect.width, rect.height].map(Math.round).join(",") : void 0,
+    sat: saturation,
+    sharp: sharpen,
+    w: width
+  }).filter(([, value]) => typeof value === "number" || Boolean(value)).map(([key, value]) => [
+    key,
+    encodeURIComponent(
+      typeof value === "number" ? Math.round(value) : value
+    )
+  ]);
+}
+
+// src/stub.ts
+function parseSanityImageAssetId(assetId) {
+  const matches = assetId.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+  if (matches) {
+    const [, id, width, height, format] = matches;
+    return { id, width: Number(width), height: Number(height), format };
+  }
+}
+function sanityImageAssetId(source) {
+  return typeof source === "string" ? source : isSanityReference(source) ? source._ref : isSanityImageAssetLike(source) ? source._id : sanityImageAssetId(source.asset);
+}
+function sanityImageAssetStub(source) {
+  const id = sanityImageAssetId(source);
+  return id ? parseSanityImageAssetId(id) : void 0;
+}
+
+// src/url.ts
+var defaultSrcsetWidths = [
   6016,
   // 6K
   5120,
@@ -32,116 +124,46 @@ var defaultWidths = [
   360,
   240
 ];
-var defaultWidth = 1280;
-var defaultQuality = 90;
-var fitComparators = {
-  cover: Math.max,
-  contain: Math.min
-};
-function fit(containee, container, mode) {
-  const sx = container.width / containee.width;
-  const sy = container.height / containee.height;
-  const s = fitComparators[mode](sx, sy);
-  return {
-    width: containee.width * s,
-    height: containee.height * s
-  };
-}
-function isCrop(x) {
-  return x != null && typeof x == "object" && "top" in x && typeof x.top === "number" && "right" in x && typeof x.right === "number" && "bottom" in x && typeof x.bottom === "number" && "left" in x && typeof x.left === "number" && ("_type" in x ? typeof x._type === "undefined" || typeof x._type === "string" : true);
-}
-function isHotspot(x) {
-  return x != null && typeof x == "object" && "width" in x && typeof x.width === "number" && "height" in x && typeof x.height === "number" && "x" in x && typeof x.x === "number" && "y" in x && typeof x.y === "number" && ("_type" in x ? typeof x._type === "undefined" || typeof x._type === "string" : true);
-}
-function isImageObjectLike(x) {
-  return x != null && typeof x === "object" && "asset" in x && (isAsset(x.asset) || isReference(x.asset));
-}
-function isImageObject(x) {
-  return isImageObjectLike(x) && ("crop" in x ? typeof x.crop === "undefined" || isCrop(x.crop) : true) && ("hotspot" in x ? typeof x.hotspot === "undefined" || isHotspot(x.hotspot) : true);
-}
-function isReference(x) {
-  return x != null && typeof x === "object" && "_ref" in x && typeof x._ref === "string";
-}
-function isAsset(x) {
-  return x != null && typeof x === "object" && "_type" in x && x._type === "sanity.asset";
-}
-function isDimensions(x) {
-  return x != null && typeof x === "object" && "aspectRatio" in x && typeof x.aspectRatio === "number" && "width" in x && typeof x.width === "number" && "height" in x && typeof x.height === "number";
-}
-function isSize(x) {
-  return x != null && typeof x === "object" && "width" in x && typeof x.width === "number" && "height" in x && typeof x.height === "number";
-}
-function isMetadata(x) {
-  return x != null && typeof x === "object" && "lqip" in x && typeof x.lqip === "string" && "dimensions" in x && isDimensions(x.dimensions);
-}
-function imageSrc({
-  client,
-  source,
-  width,
-  quality = defaultQuality,
-  aspectRatio: aspectRatio2
-}) {
-  const builder = imageUrlBuilder(client).image(source).quality(quality).auto("format").width(width);
-  return (aspectRatio2 ? builder.height(width * aspectRatio2) : builder).url();
-}
-function imageSrcset({
-  client,
-  source,
-  widths = defaultWidths,
-  quality = defaultQuality,
-  aspectRatio: aspectRatio2
-}) {
-  const builder = imageUrlBuilder(client).image(source).quality(quality).auto("format");
-  return widths.sort((a, b) => a - b).map((width) => {
-    const url = (aspectRatio2 ? builder.height(width * aspectRatio2) : builder).width(width).url();
+function sanityImageUrl(client, image, params) {
+  const url = new URL(
+    [
+      `https://cdn.sanity.io/images`,
+      client.projectId,
+      client.dataset,
+      `${image.id}-${image.width}x${image.height}.${image.format}`,
+      image.vanityName
+    ].filter(Boolean).join("/")
+  );
+  if (params) {
+    url.search = new URLSearchParams(
+      sanityImageParamsToSearchParamEntries(params)
+    ).toString();
+  }
+  return url.href;
+}
+function sanityImageSrcset(client, image, params, widths = defaultSrcsetWidths) {
+  const aspectRatio = image.height / image.width;
+  return [
+    ...widths.sort((a, b) => a - b).filter((width) => width < image.width),
+    image.width
+  ].map((width) => {
+    const url = sanityImageUrl(client, image, {
+      ...params,
+      width,
+      height: width * aspectRatio
+    });
     return `${url} ${width}w`;
   }).join(",");
 }
-function imageAlt(source) {
-  return isImageObjectLike(source) && "alt" in source && typeof source.alt === "string" ? source.alt : void 0;
-}
-function croppedSize(intrinsicSize, crop) {
-  return {
-    width: intrinsicSize.width - crop.left - crop.right,
-    height: intrinsicSize.height - crop.top - crop.bottom
-  };
-}
-function aspectRatio(size) {
-  return size.height / size.width;
-}
-function imageMetadata(source) {
-  const asset = isImageObjectLike(source) ? source.asset : source;
-  return isAsset(asset) && isMetadata(asset.metadata) ? asset.metadata : void 0;
-}
-function imageCroppedSize(source) {
-  const metadata = imageMetadata(source);
-  return metadata?.dimensions ? isImageObject(source) && source.crop != null ? croppedSize(metadata.dimensions, source.crop) : metadata.dimensions : void 0;
-}
-function imageAspectRatio(source) {
-  const size = imageCroppedSize(source);
-  return size ? aspectRatio(size) : void 0;
-}
 export {
-  aspectRatio,
-  croppedSize,
-  defaultQuality,
-  defaultWidth,
-  defaultWidths,
-  fit,
-  fitComparators,
-  imageAlt,
-  imageAspectRatio,
-  imageCroppedSize,
-  imageMetadata,
-  imageSrc,
-  imageSrcset,
-  isAsset,
-  isCrop,
-  isDimensions,
-  isHotspot,
-  isImageObject,
-  isImageObjectLike,
-  isMetadata,
-  isReference,
-  isSize
+  defaultSrcsetWidths,
+  isSanityImageAssetLike,
+  isSanityImageObject,
+  isSanityReference,
+  parseSanityImageAssetId,
+  sanityImageAssetId,
+  sanityImageAssetStub,
+  sanityImageParamsToSearchParamEntries,
+  sanityImageSrcset,
+  sanityImageUrl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "2.1.0",
+  "version": "3.1.0",
   "author": "Jonas Luebbers <jonas@jonasluebbers.com> (https://www.jonasluebbers.com)",
   "license": "MIT",
   "type": "module",
@@ -28,9 +28,6 @@
     "build": "tsup ./src/index.ts --dts --format esm --clean",
     "release": "semantic-release"
   },
-  "dependencies": {
-    "@sanity/image-url": "^1.1.0"
-  },
   "devDependencies": {
     "semantic-release": "24.2.7",
     "tsup": "8.5.0",

package/src/asset.ts

@@ -0,0 +1,12 @@
+export interface SanityImageAssetLike {
+  _id: string;
+}
+
+export function isSanityImageAssetLike(x: any): x is SanityImageAssetLike {
+  return (
+    x != null &&
+    typeof x === "object" &&
+    "_id" in x &&
+    typeof x._id === "string"
+  );
+}

package/src/imageObject.ts

@@ -0,0 +1,15 @@
+import { isSanityImageAssetLike, SanityImageAssetLike } from "./asset";
+import { isSanityReference, SanityReference } from "./reference";
+
+export interface SanityImageObject {
+  asset: SanityImageAssetLike | SanityReference;
+}
+
+export function isSanityImageObject(x: any): x is SanityImageObject {
+  return (
+    x != null &&
+    typeof x === "object" &&
+    "asset" in x &&
+    (isSanityImageAssetLike(x.asset) || isSanityReference(x.asset))
+  );
+}

package/src/index.ts

@@ -1,267 +1,7 @@
-import imageUrlBuilder from "@sanity/image-url";
-import {
-  SanityAsset,
-  SanityClientLike,
-  SanityImageCrop,
-  SanityImageDimensions,
-  SanityImageHotspot,
-  SanityImageMetadata,
-  SanityImageObject,
-  SanityImageObjectLike,
-  SanityImageSource,
-  SanityModernClientLike,
-  SanityProjectDetails,
-  SanityReference,
-  Size,
-} from "./types";
-
-export * from "./types";
-
-export const defaultWidths = [
-  6016, // 6K
-  5120, // 5K
-  4480, // 4.5K
-  3840, // 4K
-  3200, // QHD+
-  2560, // WQXGA
-  2048, // QXGA
-  1920, // 1080p
-  1668, // iPad
-  1280, // 720p
-  1080, // iPhone 6-8 Plus
-  960,
-  720, // iPhone 6-8
-  640, // 480p
-  480,
-  360,
-  240,
-];
-
-export const defaultWidth = 1280;
-
-export const defaultQuality = 90;
-
-export const fitComparators = {
-  cover: Math.max,
-  contain: Math.min,
-};
-
-// TODO: impement comparators for every FitMode
-export function fit(
-  containee: Size,
-  container: Size,
-  mode: keyof typeof fitComparators
-) {
-  const sx = container.width / containee.width;
-  const sy = container.height / containee.height;
-  const s = fitComparators[mode](sx, sy);
-  return {
-    width: containee.width * s,
-    height: containee.height * s,
-  };
-}
-
-export function isCrop(x: unknown): x is SanityImageCrop {
-  return (
-    x != null &&
-    typeof x == "object" &&
-    "top" in x &&
-    typeof x.top === "number" &&
-    "right" in x &&
-    typeof x.right === "number" &&
-    "bottom" in x &&
-    typeof x.bottom === "number" &&
-    "left" in x &&
-    typeof x.left === "number" &&
-    ("_type" in x
-      ? typeof x._type === "undefined" || typeof x._type === "string"
-      : true)
-  );
-}
-
-export function isHotspot(x: unknown): x is SanityImageHotspot {
-  return (
-    x != null &&
-    typeof x == "object" &&
-    "width" in x &&
-    typeof x.width === "number" &&
-    "height" in x &&
-    typeof x.height === "number" &&
-    "x" in x &&
-    typeof x.x === "number" &&
-    "y" in x &&
-    typeof x.y === "number" &&
-    ("_type" in x
-      ? typeof x._type === "undefined" || typeof x._type === "string"
-      : true)
-  );
-}
-
-export function isImageObjectLike(x: unknown): x is SanityImageObjectLike {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "asset" in x &&
-    (isAsset(x.asset) || isReference(x.asset))
-  );
-}
-
-export function isImageObject(x: unknown): x is SanityImageObject {
-  return (
-    isImageObjectLike(x) &&
-    ("crop" in x ? typeof x.crop === "undefined" || isCrop(x.crop) : true) &&
-    ("hotspot" in x
-      ? typeof x.hotspot === "undefined" || isHotspot(x.hotspot)
-      : true)
-  );
-}
-
-export function isReference(x: unknown): x is SanityReference {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "_ref" in x &&
-    typeof x._ref === "string"
-  );
-}
-
-export function isAsset(x: unknown): x is SanityAsset {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "_type" in x &&
-    x._type === "sanity.asset"
-  );
-}
-
-export function isDimensions(x: unknown): x is SanityImageDimensions {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "aspectRatio" in x &&
-    typeof x.aspectRatio === "number" &&
-    "width" in x &&
-    typeof x.width === "number" &&
-    "height" in x &&
-    typeof x.height === "number"
-  );
-}
-
-export function isSize(x: unknown): x is Size {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "width" in x &&
-    typeof x.width === "number" &&
-    "height" in x &&
-    typeof x.height === "number"
-  );
-}
-
-export function isMetadata(x: unknown): x is SanityImageMetadata {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "lqip" in x &&
-    typeof x.lqip === "string" &&
-    "dimensions" in x &&
-    isDimensions(x.dimensions)
-  );
-}
-
-export interface ImageSrcOptions {
-  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-  source: SanityImageSource;
-  width: number;
-  quality?: number;
-  aspectRatio?: number;
-}
-
-export function imageSrc({
-  client,
-  source,
-  width,
-  quality = defaultQuality,
-  aspectRatio,
-}: ImageSrcOptions): string {
-  const builder = imageUrlBuilder(client)
-    .image(source)
-    .quality(quality)
-    .auto("format")
-    .width(width);
-  return (aspectRatio ? builder.height(width * aspectRatio) : builder).url();
-}
-
-export interface ImageSrcsetOptions {
-  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-  source: SanityImageSource;
-  widths?: number[];
-  quality?: number;
-  aspectRatio?: number;
-}
-
-export function imageSrcset({
-  client,
-  source,
-  widths = defaultWidths,
-  quality = defaultQuality,
-  aspectRatio,
-}: ImageSrcsetOptions): string {
-  const builder = imageUrlBuilder(client)
-    .image(source)
-    .quality(quality)
-    .auto("format");
-  return widths
-    .sort((a, b) => a - b)
-    .map((width) => {
-      const url = (aspectRatio ? builder.height(width * aspectRatio) : builder)
-        .width(width)
-        .url();
-      return `${url} ${width}w`;
-    })
-    .join(",");
-}
-
-export function imageAlt(source: SanityImageSource): string | undefined {
-  return isImageObjectLike(source) &&
-    "alt" in source &&
-    typeof source.alt === "string"
-    ? source.alt
-    : undefined;
-}
-
-export function croppedSize(intrinsicSize: Size, crop: SanityImageCrop): Size {
-  return {
-    width: intrinsicSize.width - crop.left - crop.right,
-    height: intrinsicSize.height - crop.top - crop.bottom,
-  };
-}
-
-export function aspectRatio(size: Size): number {
-  return size.height / size.width;
-}
-
-export function imageMetadata(
-  source: SanityImageSource
-): SanityImageMetadata | undefined {
-  const asset = isImageObjectLike(source) ? source.asset : source;
-  return isAsset(asset) && isMetadata(asset.metadata)
-    ? asset.metadata
-    : undefined;
-}
-
-export function imageCroppedSize(source: SanityImageSource): Size | undefined {
-  const metadata = imageMetadata(source);
-  return metadata?.dimensions
-    ? isImageObject(source) && source.crop != null
-      ? croppedSize(metadata.dimensions, source.crop)
-      : metadata.dimensions
-    : undefined;
-}
-
-export function imageAspectRatio(
-  source: SanityImageSource
-): number | undefined {
-  const size = imageCroppedSize(source);
-  return size ? aspectRatio(size) : undefined;
-}
+export * from "./asset";
+export * from "./imageObject";
+export * from "./metadata";
+export * from "./params";
+export * from "./reference";
+export * from "./stub";
+export * from "./url";

package/src/metadata.ts

@@ -0,0 +1,35 @@
+export interface SanityImagePaletteSwatch {
+  _type?: "sanity.imagePaletteSwatch" | null;
+  background?: string | null;
+  foreground?: string | null;
+  population?: number | null;
+  title?: string | null;
+}
+
+export interface SanityImagePalette {
+  _type?: "sanity.imagePalette" | null;
+  darkMuted?: SanityImagePaletteSwatch | null;
+  darkVibrant?: SanityImagePaletteSwatch | null;
+  dominant?: SanityImagePaletteSwatch | null;
+  lightMuted?: SanityImagePaletteSwatch | null;
+  lightVibrant?: SanityImagePaletteSwatch | null;
+  muted?: SanityImagePaletteSwatch | null;
+  vibrant?: SanityImagePaletteSwatch | null;
+}
+
+export interface SanityImageDimensions {
+  _type?: "sanity.imageDimensions" | null;
+  aspectRatio?: number | null;
+  width?: number | null;
+  height?: number | null;
+}
+
+export interface SanityImageMetadata {
+  _type: "sanity.imageMetadata";
+  blurHash?: string | null;
+  dimensions?: SanityImageDimensions | null;
+  hasAlpha?: boolean | null;
+  isOpaque?: boolean | null;
+  lqip?: string | null;
+  palette?: SanityImagePalette | null;
+}

package/src/params.ts

@@ -0,0 +1,118 @@
+export type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
+
+export type FitMode =
+  | "clip"
+  | "crop"
+  | "fill"
+  | "fillmax"
+  | "max"
+  | "scale"
+  | "min";
+
+export type CropMode =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "center"
+  | "focalpoint"
+  | "entropy";
+
+export type AutoMode = "format";
+
+export type Orientation = 0 | 90 | 180 | 270;
+
+export type Dpr = 1 | 2 | 3;
+
+export type SanityImageParams = {
+  auto?: AutoMode;
+  background?: string;
+  blur?: number;
+  crop?: CropMode;
+  download?: boolean | string;
+  dpr?: Dpr;
+  fit?: FitMode;
+  flipHorizontal?: boolean;
+  flipVertical?: boolean;
+  focalPoint?: { x: number; y: number };
+  format?: ImageFormat;
+  frame?: number;
+  height?: number;
+  invert?: boolean;
+  maxHeight?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  orientation?: Orientation;
+  pad?: number;
+  quality?: number;
+  rect?: { left: number; top: number; width: number; height: number };
+  saturation?: number;
+  sharpen?: number;
+  width?: number;
+};
+
+export function sanityImageParamsToSearchParamEntries({
+  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,
+}: SanityImageParams): string[][] {
+  return Object.entries({
+    auto,
+    bg: background,
+    blur,
+    crop,
+    dl: download,
+    dpr,
+    fit,
+    flip: [flipHorizontal && "h", flipVertical && "v"].filter(Boolean).join(""),
+    fm: format,
+    "fp-x": focalPoint?.x,
+    "fp-y": focalPoint?.y,
+    frame,
+    h: height,
+    invert,
+    "max-h": maxHeight,
+    "max-w": maxWidth,
+    "min-h": minHeight,
+    "min-w": minWidth,
+    or: orientation,
+    pad,
+    q: quality,
+    rect: rect
+      ? [rect.left, rect.top, rect.width, rect.height].map(Math.round).join(",")
+      : undefined,
+    sat: saturation,
+    sharp: sharpen,
+    w: width,
+  })
+    .filter(([, value]) => typeof value === "number" || Boolean(value))
+    .map(([key, value]) => [
+      key,
+      encodeURIComponent(
+        typeof value === "number" ? Math.round(value) : (value as string)
+      ),
+    ]);
+}

package/src/reference.ts

@@ -0,0 +1,12 @@
+export interface SanityReference {
+  _ref: string;
+}
+
+export function isSanityReference(x: any): x is SanityReference {
+  return (
+    x != null &&
+    typeof x === "object" &&
+    "_ref" in x &&
+    typeof x._ref === "string"
+  );
+}

package/src/stub.ts

@@ -0,0 +1,44 @@
+import { isSanityImageAssetLike, SanityImageAssetLike } from "./asset";
+import { SanityImageObject } from "./imageObject";
+import { isSanityReference, SanityReference } from "./reference";
+
+export type SanityImageSource =
+  | SanityImageObject
+  | SanityReference
+  | SanityImageAssetLike
+  | string;
+
+export interface SanityImageAssetStub {
+  id: string;
+  width: number;
+  height: number;
+  format: string;
+  vanityName?: string;
+}
+
+export function parseSanityImageAssetId(
+  assetId: string
+): SanityImageAssetStub | undefined {
+  const matches = assetId.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+  if (matches) {
+    const [, id, width, height, format] = matches;
+    return { id, width: Number(width), height: Number(height), format };
+  }
+}
+
+export function sanityImageAssetId(source: SanityImageSource): string {
+  return typeof source === "string"
+    ? source
+    : isSanityReference(source)
+    ? source._ref
+    : isSanityImageAssetLike(source)
+    ? source._id
+    : sanityImageAssetId(source.asset);
+}
+
+export function sanityImageAssetStub(
+  source: SanityImageSource
+): SanityImageAssetStub | undefined {
+  const id = sanityImageAssetId(source);
+  return id ? parseSanityImageAssetId(id) : undefined;
+}

package/src/url.ts

@@ -0,0 +1,76 @@
+import {
+  SanityImageParams,
+  sanityImageParamsToSearchParamEntries,
+} from "./params";
+import { SanityImageAssetStub } from "./stub";
+
+export const defaultSrcsetWidths = [
+  6016, // 6K
+  5120, // 5K
+  4480, // 4.5K
+  3840, // 4K
+  3200, // QHD+
+  2560, // WQXGA
+  2048, // QXGA
+  1920, // 1080p
+  1668, // iPad
+  1280, // 720p
+  1080, // iPhone 6-8 Plus
+  960,
+  720, // iPhone 6-8
+  640, // 480p
+  480,
+  360,
+  240,
+];
+
+export interface SanityClientLike {
+  projectId: string;
+  dataset: string;
+}
+
+export function sanityImageUrl(
+  client: SanityClientLike,
+  image: SanityImageAssetStub,
+  params?: SanityImageParams
+): string {
+  const url = new URL(
+    [
+      `https://cdn.sanity.io/images`,
+      client.projectId,
+      client.dataset,
+      `${image.id}-${image.width}x${image.height}.${image.format}`,
+      image.vanityName,
+    ]
+      .filter(Boolean)
+      .join("/")
+  );
+  if (params) {
+    url.search = new URLSearchParams(
+      sanityImageParamsToSearchParamEntries(params)
+    ).toString();
+  }
+  return url.href;
+}
+
+export function sanityImageSrcset(
+  client: SanityClientLike,
+  image: SanityImageAssetStub,
+  params?: Omit<SanityImageParams, "width">,
+  widths: number[] = defaultSrcsetWidths
+): string {
+  const aspectRatio = image.height / image.width;
+  return [
+    ...widths.sort((a, b) => a - b).filter((width) => width < image.width),
+    image.width,
+  ]
+    .map((width) => {
+      const url = sanityImageUrl(client, image, {
+        ...params,
+        width,
+        height: width * aspectRatio,
+      });
+      return `${url} ${width}w`;
+    })
+    .join(",");
+}

package/src/types.ts

@@ -1,208 +0,0 @@
-export type ImageUrlBuilderOptions = Partial<SanityProjectDetails> & {
-  baseUrl?: string;
-  source?: SanityImageSource;
-  bg?: string;
-  dpr?: number;
-  width?: number;
-  height?: number;
-  focalPoint?: {
-    x: number;
-    y: number;
-  };
-  maxWidth?: number;
-  maxHeight?: number;
-  minWidth?: number;
-  minHeight?: number;
-  blur?: number;
-  sharpen?: number;
-  rect?: {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-  };
-  format?: ImageFormat;
-  invert?: boolean;
-  orientation?: Orientation;
-  quality?: number;
-  download?: boolean | string;
-  flipHorizontal?: boolean;
-  flipVertical?: boolean;
-  ignoreImageParams?: boolean;
-  fit?: FitMode;
-  crop?: CropMode;
-  saturation?: number;
-  auto?: AutoMode;
-  pad?: number;
-  vanityName?: string;
-  frame?: number;
-};
-
-export type ImageUrlBuilderOptionsWithAliases = ImageUrlBuilderOptions & {
-  w?: number;
-  h?: number;
-  q?: number;
-  fm?: number;
-  dl?: boolean | string;
-  or?: Orientation;
-  sharp?: number;
-  "min-h"?: number;
-  "max-h"?: number;
-  "min-w"?: number;
-  "max-w"?: number;
-  sat?: number;
-  [key: string]: any;
-};
-
-export type ImageUrlBuilderOptionsWithAsset = ImageUrlBuilderOptions & {
-  asset: {
-    id: string;
-    width: number;
-    height: number;
-    format: string;
-  };
-  [key: string]: any;
-};
-
-export type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
-
-export type FitMode =
-  | "clip"
-  | "crop"
-  | "fill"
-  | "fillmax"
-  | "max"
-  | "scale"
-  | "min";
-
-export type CropMode =
-  | "top"
-  | "bottom"
-  | "left"
-  | "right"
-  | "center"
-  | "focalpoint"
-  | "entropy";
-
-export type AutoMode = "format";
-
-export type Orientation = 0 | 90 | 180 | 270;
-
-export interface SanityClientLike {
-  clientConfig: {
-    dataset?: string;
-    projectId?: string;
-    apiHost?: string;
-  };
-}
-
-export type SanityModernClientLike = {
-  config(): {
-    dataset?: string;
-    projectId?: string;
-    apiHost?: string;
-  };
-};
-
-export declare type SanityImageSource =
-  | string
-  | SanityReference
-  | SanityAsset
-  | SanityImageObject
-  | SanityImageWithAssetStub;
-
-export interface SanityProjectDetails {
-  baseUrl?: string;
-  projectId: string;
-  dataset: string;
-}
-
-export interface SanityReference {
-  _ref: string;
-}
-
-export interface SanityImageWithAssetStub {
-  asset: {
-    url: string;
-  };
-}
-
-export interface SanityAsset {
-  _id?: string;
-  url?: string;
-  path?: string;
-  assetId?: string;
-  extension?: string;
-  [key: string]: any;
-}
-
-export interface SanityImageDimensions {
-  aspectRatio: number;
-  height: number;
-  width: number;
-}
-
-export interface SanityImageFitResult {
-  width?: number;
-  height?: number;
-  rect: SanityImageRect;
-}
-
-export interface SanityImageRect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-export interface SanityImageCrop {
-  _type?: string;
-  left: number;
-  bottom: number;
-  right: number;
-  top: number;
-}
-
-export interface SanityImageHotspot {
-  _type?: string;
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-}
-
-export interface SanityImageObject {
-  asset: SanityReference | SanityAsset;
-  crop?: SanityImageCrop;
-  hotspot?: SanityImageHotspot;
-}
-
-export interface CropSpec {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-export interface HotspotSpec {
-  left: number;
-  top: number;
-  right: number;
-  bottom: number;
-}
-
-export interface SanityImageObjectLike
-  extends Pick<SanityImageObject, "asset"> {
-  [key: string]: any;
-}
-
-export interface SanityImageMetadata {
-  lqip?: string;
-  dimensions?: SanityImageDimensions;
-  [key: string]: any;
-}
-
-export interface Size {
-  width: number;
-  height: number;
-}