@nonphoto/sanity-image 3.1.0 → 4.0.0

package/dist/index.d.ts

@@ -1,50 +1,44 @@
-interface SanityImageAssetLike {
+interface AssetLike {
     _id: string;
 }
-declare function isSanityImageAssetLike(x: any): x is SanityImageAssetLike;
-
-interface SanityReference {
+interface Reference {
     _ref: string;
 }
-declare function isSanityReference(x: any): x is SanityReference;
-
-interface SanityImageObject {
-    asset: SanityImageAssetLike | SanityReference;
+interface ImageAsset {
+    _id: string;
+    assetId: string;
+    width: number;
+    height: number;
+    extension: string;
 }
-declare function isSanityImageObject(x: any): x is SanityImageObject;
+type ImageAssetSource = {
+    asset: ImageAssetSource;
+} | ImageAsset | AssetLike | Reference | string;
+declare function isAssetLike(input: unknown): input is AssetLike;
+declare function isReference(input: unknown): input is Reference;
+declare function isImageAsset(input: unknown): input is ImageAsset;
+declare function hasAssetProp(input: unknown): input is {
+    asset: NonNullable<unknown>;
+};
+declare function imageIdFromSource(source: ImageAssetSource): string;
+declare function imageIdFromUnknown(input: unknown): string | undefined;
+declare function imageAsset(id: string): ImageAsset | undefined;
+declare function imageAssetFromUnknown(input: unknown): ImageAsset | undefined;
 
-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;
+declare const defaultSrcsetWidths: number[];
+
+type Crop = {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+
+interface RectLike {
+    pos: ArrayLike<number>;
+    size: ArrayLike<number>;
 }
+declare function rectFromCrop(asset: Pick<ImageAsset, "width" | "height">, crop: Crop): RectLike;
 
 type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
 type FitMode = "clip" | "crop" | "fill" | "fillmax" | "max" | "scale" | "min";
@@ -52,7 +46,7 @@ type CropMode = "top" | "bottom" | "left" | "right" | "center" | "focalpoint" |
 type AutoMode = "format";
 type Orientation = 0 | 90 | 180 | 270;
 type Dpr = 1 | 2 | 3;
-type SanityImageParams = {
+type ImageOptions = {
     auto?: AutoMode;
     background?: string;
     blur?: number;
@@ -62,10 +56,7 @@ type SanityImageParams = {
     fit?: FitMode;
     flipHorizontal?: boolean;
     flipVertical?: boolean;
-    focalPoint?: {
-        x: number;
-        y: number;
-    };
+    focalPoint?: ArrayLike<number>;
     format?: ImageFormat;
     frame?: number;
     height?: number;
@@ -77,36 +68,21 @@ type SanityImageParams = {
     orientation?: Orientation;
     pad?: number;
     quality?: number;
-    rect?: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    };
+    rect?: RectLike;
     saturation?: number;
     sharpen?: number;
     width?: number;
 };
-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;
-    format: string;
-    vanityName?: string;
-}
-declare function parseSanityImageAssetId(assetId: string): SanityImageAssetStub | undefined;
-declare function sanityImageAssetId(source: SanityImageSource): string;
-declare function sanityImageAssetStub(source: SanityImageSource): SanityImageAssetStub | undefined;
+declare function imageOptionsToSearchParamEntries({ 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, }: ImageOptions): string[][];
 
-declare const defaultSrcsetWidths: number[];
 interface SanityClientLike {
     projectId: string;
     dataset: string;
 }
-declare function sanityImageUrl(client: SanityClientLike, image: SanityImageAssetStub, params?: SanityImageParams): string;
-declare function sanityImageSrcset(client: SanityClientLike, image: SanityImageAssetStub, params?: Omit<SanityImageParams, "width">, widths?: number[]): string;
+interface ImageOptionsWithVanityName extends ImageOptions {
+    vanityName?: string;
+}
+declare function imageUrl(client: SanityClientLike, asset: ImageAsset, options?: ImageOptionsWithVanityName): string | undefined;
+declare function imageSrcset(client: SanityClientLike, asset: ImageAsset, params?: (width: number) => Omit<ImageOptionsWithVanityName, "width">, widths?: number[]): string | undefined;
 
-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 };
+export { type AssetLike, type AutoMode, type Crop, type CropMode, type Dpr, type FitMode, type ImageAsset, type ImageAssetSource, type ImageFormat, type ImageOptions, type ImageOptionsWithVanityName, type Orientation, type RectLike, type Reference, type SanityClientLike, defaultSrcsetWidths, hasAssetProp, imageAsset, imageAssetFromUnknown, imageIdFromSource, imageIdFromUnknown, imageOptionsToSearchParamEntries, imageSrcset, imageUrl, isAssetLike, isImageAsset, isReference, rectFromCrop };

package/dist/index.js

@@ -1,20 +1,83 @@
 // src/asset.ts
-function isSanityImageAssetLike(x) {
-  return x != null && typeof x === "object" && "_id" in x && typeof x._id === "string";
+function isAssetLike(input) {
+  return input != null && typeof input === "object" && "_id" in input && typeof input._id === "string";
 }
-
-// src/reference.ts
-function isSanityReference(x) {
-  return x != null && typeof x === "object" && "_ref" in x && typeof x._ref === "string";
+function isReference(input) {
+  return input != null && typeof input === "object" && "_ref" in input && typeof input._ref === "string";
 }
-
-// src/imageObject.ts
-function isSanityImageObject(x) {
-  return x != null && typeof x === "object" && "asset" in x && (isSanityImageAssetLike(x.asset) || isSanityReference(x.asset));
+function isImageAsset(input) {
+  return input != null && typeof input === "object" && "assetId" in input && typeof input.assetId === "string" && "width" in input && typeof input.width === "number" && "height" in input && typeof input.height === "number" && "extension" in input && typeof input.extension === "string";
+}
+function hasAssetProp(input) {
+  return input != null && typeof input === "object" && "asset" in input;
 }
+function imageIdFromSource(source) {
+  return typeof source === "string" ? source : isReference(source) ? source._ref : isAssetLike(source) ? source._id : imageIdFromSource(source.asset);
+}
+function imageIdFromUnknown(input) {
+  return typeof input === "string" ? input : isReference(input) ? input._ref : isAssetLike(input) ? input._id : hasAssetProp(input) ? imageIdFromUnknown(input.asset) : void 0;
+}
+function imageAsset(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 imageAssetFromUnknown(input) {
+  if (isImageAsset(input)) {
+    return input;
+  } else {
+    const id = imageIdFromUnknown(input);
+    return id ? imageAsset(id) : void 0;
+  }
+}
+
+// src/constants.ts
+var 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
+];
 
-// src/params.ts
-function sanityImageParamsToSearchParamEntries({
+// src/options.ts
+function isValidEntry(entry) {
+  return typeof entry[0] === "string" && ["string", "number", "boolean"].includes(typeof entry[1]);
+}
+function imageOptionsToSearchParamEntries({
   auto,
   background,
   blur,
@@ -51,8 +114,8 @@ function sanityImageParamsToSearchParamEntries({
     fit,
     flip: [flipHorizontal && "h", flipVertical && "v"].filter(Boolean).join(""),
     fm: format,
-    "fp-x": focalPoint?.x,
-    "fp-y": focalPoint?.y,
+    "fp-x": focalPoint?.[0],
+    "fp-y": focalPoint?.[1],
     frame,
     h: height,
     invert,
@@ -63,107 +126,70 @@ function sanityImageParamsToSearchParamEntries({
     or: orientation,
     pad,
     q: quality,
-    rect: rect ? [rect.left, rect.top, rect.width, rect.height].map(Math.round).join(",") : void 0,
+    rect: rect ? [rect.pos[0], rect.pos[1], rect.size[0], rect.size[1]].map(Math.round).join(",") : void 0,
     sat: saturation,
     sharp: sharpen,
     w: width
-  }).filter(([, value]) => typeof value === "number" || Boolean(value)).map(([key, value]) => [
+  }).filter(isValidEntry).filter(([, value]) => typeof value === "number" || Boolean(value)).map(([key, value]) => [
     key,
-    encodeURIComponent(
-      typeof value === "number" ? Math.round(value) : value
-    )
+    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,
-  // 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
-];
-function sanityImageUrl(client, image, params) {
+// src/image.ts
+function imageUrl(client, asset, options) {
   const url = new URL(
     [
       `https://cdn.sanity.io/images`,
       client.projectId,
       client.dataset,
-      `${image.id}-${image.width}x${image.height}.${image.format}`,
-      image.vanityName
+      `${asset.assetId}-${asset.width}x${asset.height}.${asset.extension}`,
+      options?.vanityName
     ].filter(Boolean).join("/")
   );
-  if (params) {
+  if (options) {
     url.search = new URLSearchParams(
-      sanityImageParamsToSearchParamEntries(params)
+      imageOptionsToSearchParamEntries(options)
     ).toString();
   }
   return url.href;
 }
-function sanityImageSrcset(client, image, params, widths = defaultSrcsetWidths) {
-  const aspectRatio = image.height / image.width;
+function imageSrcset(client, asset, params, widths = defaultSrcsetWidths) {
   return [
-    ...widths.sort((a, b) => a - b).filter((width) => width < image.width),
-    image.width
+    ...widths.sort((a, b) => a - b).filter((width) => width < asset.width),
+    asset.width
   ].map((width) => {
-    const url = sanityImageUrl(client, image, {
-      ...params,
-      width,
-      height: width * aspectRatio
+    const url = imageUrl(client, asset, {
+      ...params?.(width),
+      width
     });
     return `${url} ${width}w`;
   }).join(",");
 }
+
+// src/rect.ts
+function rectFromCrop(asset, crop) {
+  const left = crop.left ?? 0;
+  const right = crop.right ?? 0;
+  const top = crop.top ?? 0;
+  const bottom = crop.bottom ?? 0;
+  return {
+    pos: [left * asset.width, right * asset.width],
+    size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height]
+  };
+}
 export {
   defaultSrcsetWidths,
-  isSanityImageAssetLike,
-  isSanityImageObject,
-  isSanityReference,
-  parseSanityImageAssetId,
-  sanityImageAssetId,
-  sanityImageAssetStub,
-  sanityImageParamsToSearchParamEntries,
-  sanityImageSrcset,
-  sanityImageUrl
+  hasAssetProp,
+  imageAsset,
+  imageAssetFromUnknown,
+  imageIdFromSource,
+  imageIdFromUnknown,
+  imageOptionsToSearchParamEntries,
+  imageSrcset,
+  imageUrl,
+  isAssetLike,
+  isImageAsset,
+  isReference,
+  rectFromCrop
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "author": "Jonas Luebbers <jonas@jonasluebbers.com> (https://www.jonasluebbers.com)",
   "license": "MIT",
   "type": "module",

package/src/asset.ts

@@ -1,12 +1,108 @@
-export interface SanityImageAssetLike {
+export interface AssetLike {
   _id: string;
 }
 
-export function isSanityImageAssetLike(x: any): x is SanityImageAssetLike {
+export interface Reference {
+  _ref: string;
+}
+
+export interface ImageAsset {
+  _id: string;
+  assetId: string;
+  width: number;
+  height: number;
+  extension: string;
+}
+
+export type ImageAssetSource =
+  | {
+      asset: ImageAssetSource;
+    }
+  | ImageAsset
+  | AssetLike
+  | Reference
+  | string;
+
+export function isAssetLike(input: unknown): input is AssetLike {
+  return (
+    input != null &&
+    typeof input === "object" &&
+    "_id" in input &&
+    typeof input._id === "string"
+  );
+}
+
+export function isReference(input: unknown): input is Reference {
+  return (
+    input != null &&
+    typeof input === "object" &&
+    "_ref" in input &&
+    typeof input._ref === "string"
+  );
+}
+
+export function isImageAsset(input: unknown): input is ImageAsset {
   return (
-    x != null &&
-    typeof x === "object" &&
-    "_id" in x &&
-    typeof x._id === "string"
+    input != null &&
+    typeof input === "object" &&
+    "assetId" in input &&
+    typeof input.assetId === "string" &&
+    "width" in input &&
+    typeof input.width === "number" &&
+    "height" in input &&
+    typeof input.height === "number" &&
+    "extension" in input &&
+    typeof input.extension === "string"
   );
 }
+
+export function hasAssetProp(
+  input: unknown,
+): input is { asset: NonNullable<unknown> } {
+  return input != null && typeof input === "object" && "asset" in input;
+}
+
+export function imageIdFromSource(source: ImageAssetSource): string {
+  return typeof source === "string"
+    ? source
+    : isReference(source)
+      ? source._ref
+      : isAssetLike(source)
+        ? source._id
+        : imageIdFromSource(source.asset);
+}
+
+export function imageIdFromUnknown(input: unknown): string | undefined {
+  return typeof input === "string"
+    ? input
+    : isReference(input)
+      ? input._ref
+      : isAssetLike(input)
+        ? input._id
+        : hasAssetProp(input)
+          ? imageIdFromUnknown(input.asset)
+          : undefined;
+}
+
+export function imageAsset(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 imageAssetFromUnknown(input: unknown): ImageAsset | undefined {
+  if (isImageAsset(input)) {
+    return input;
+  } else {
+    const id = imageIdFromUnknown(input);
+    return id ? imageAsset(id) : undefined;
+  }
+}

package/src/constants.ts

@@ -0,0 +1,19 @@
+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,
+];

package/src/crop.ts

@@ -0,0 +1,6 @@
+export type Crop = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};

package/src/image.ts

@@ -0,0 +1,56 @@
+import { ImageAsset } from "./asset";
+import { defaultSrcsetWidths } from "./constants";
+import { ImageOptions, imageOptionsToSearchParamEntries } from "./options";
+
+export interface SanityClientLike {
+  projectId: string;
+  dataset: string;
+}
+
+export interface ImageOptionsWithVanityName extends ImageOptions {
+  vanityName?: string;
+}
+
+export function imageUrl(
+  client: SanityClientLike,
+  asset: ImageAsset,
+  options?: ImageOptionsWithVanityName,
+): string | undefined {
+  const url = new URL(
+    [
+      `https://cdn.sanity.io/images`,
+      client.projectId,
+      client.dataset,
+      `${asset.assetId}-${asset.width}x${asset.height}.${asset.extension}`,
+      options?.vanityName,
+    ]
+      .filter(Boolean)
+      .join("/"),
+  );
+  if (options) {
+    url.search = new URLSearchParams(
+      imageOptionsToSearchParamEntries(options),
+    ).toString();
+  }
+  return url.href;
+}
+
+export function imageSrcset(
+  client: SanityClientLike,
+  asset: ImageAsset,
+  params?: (width: number) => Omit<ImageOptionsWithVanityName, "width">,
+  widths: number[] = defaultSrcsetWidths,
+): string | undefined {
+  return [
+    ...widths.sort((a, b) => a - b).filter((width) => width < asset.width),
+    asset.width,
+  ]
+    .map((width) => {
+      const url = imageUrl(client, asset, {
+        ...params?.(width),
+        width,
+      });
+      return `${url} ${width}w`;
+    })
+    .join(",");
+}

package/src/index.ts

@@ -1,7 +1,6 @@
 export * from "./asset";
-export * from "./imageObject";
-export * from "./metadata";
-export * from "./params";
-export * from "./reference";
-export * from "./stub";
-export * from "./url";
+export * from "./constants";
+export * from "./crop";
+export * from "./image";
+export * from "./options";
+export * from "./rect";

package/src/{params.ts → options.ts}

@@ -1,3 +1,5 @@
+import { RectLike } from "./rect";
+
 export type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
 
 export type FitMode =
@@ -24,7 +26,7 @@ export type Orientation = 0 | 90 | 180 | 270;
 
 export type Dpr = 1 | 2 | 3;
 
-export type SanityImageParams = {
+export type ImageOptions = {
   auto?: AutoMode;
   background?: string;
   blur?: number;
@@ -34,7 +36,7 @@ export type SanityImageParams = {
   fit?: FitMode;
   flipHorizontal?: boolean;
   flipVertical?: boolean;
-  focalPoint?: { x: number; y: number };
+  focalPoint?: ArrayLike<number>;
   format?: ImageFormat;
   frame?: number;
   height?: number;
@@ -46,13 +48,22 @@ export type SanityImageParams = {
   orientation?: Orientation;
   pad?: number;
   quality?: number;
-  rect?: { left: number; top: number; width: number; height: number };
+  rect?: RectLike;
   saturation?: number;
   sharpen?: number;
   width?: number;
 };
 
-export function sanityImageParamsToSearchParamEntries({
+type ValidEntry = [string, string | number | boolean];
+
+function isValidEntry(entry: [unknown, unknown]): entry is ValidEntry {
+  return (
+    typeof entry[0] === "string" &&
+    ["string", "number", "boolean"].includes(typeof entry[1])
+  );
+}
+
+export function imageOptionsToSearchParamEntries({
   auto,
   background,
   blur,
@@ -78,7 +89,7 @@ export function sanityImageParamsToSearchParamEntries({
   saturation,
   sharpen,
   width,
-}: SanityImageParams): string[][] {
+}: ImageOptions): string[][] {
   return Object.entries({
     auto,
     bg: background,
@@ -89,8 +100,8 @@ export function sanityImageParamsToSearchParamEntries({
     fit,
     flip: [flipHorizontal && "h", flipVertical && "v"].filter(Boolean).join(""),
     fm: format,
-    "fp-x": focalPoint?.x,
-    "fp-y": focalPoint?.y,
+    "fp-x": focalPoint?.[0],
+    "fp-y": focalPoint?.[1],
     frame,
     h: height,
     invert,
@@ -102,17 +113,18 @@ export function sanityImageParamsToSearchParamEntries({
     pad,
     q: quality,
     rect: rect
-      ? [rect.left, rect.top, rect.width, rect.height].map(Math.round).join(",")
+      ? [rect.pos[0], rect.pos[1], rect.size[0], rect.size[1]]
+          .map(Math.round)
+          .join(",")
       : undefined,
     sat: saturation,
     sharp: sharpen,
     w: width,
   })
+    .filter(isValidEntry)
     .filter(([, value]) => typeof value === "number" || Boolean(value))
     .map(([key, value]) => [
       key,
-      encodeURIComponent(
-        typeof value === "number" ? Math.round(value) : (value as string)
-      ),
+      encodeURIComponent(typeof value === "number" ? Math.round(value) : value),
     ]);
 }

package/src/rect.ts

@@ -0,0 +1,21 @@
+import { ImageAsset } from "./asset";
+import { Crop } from "./crop";
+
+export interface RectLike {
+  pos: ArrayLike<number>;
+  size: ArrayLike<number>;
+}
+
+export function rectFromCrop(
+  asset: Pick<ImageAsset, "width" | "height">,
+  crop: Crop,
+): RectLike {
+  const left = crop.left ?? 0;
+  const right = crop.right ?? 0;
+  const top = crop.top ?? 0;
+  const bottom = crop.bottom ?? 0;
+  return {
+    pos: [left * asset.width, right * asset.width],
+    size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height],
+  };
+}

package/src/imageObject.ts

@@ -1,15 +0,0 @@
-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/metadata.ts

@@ -1,35 +0,0 @@
-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/reference.ts

@@ -1,12 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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(",");
-}