@lonik/oh-image 2.0.5 → 2.1.0

package/dist/react.d.ts

@@ -6,7 +6,6 @@ interface ImageLoaderOptions {
   src: string;
   width?: number | null | undefined;
   height?: number | null | undefined;
-  isPlaceholder?: boolean;
 }
 type ImageLoader = (options: ImageLoaderOptions) => string;
 type ImageSrcType = string | ImageSrc;
@@ -20,7 +19,7 @@ interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "
   /** */
   src: ImageSrcType;
   /** The URL of the placeholder image to display while loading. */
-  placeholderUrl?: string | undefined;
+  placeholder?: string | undefined | ImageLoader | null;
   /**
    * Sets the image to "fill mode", which eliminates the height/width requirement and adds
    * styles such that the image fills its containing element.
@@ -77,24 +76,394 @@ declare function ImageProvider({
   children: React.ReactNode;
 } & Partial<ImageContextValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/react/loaders/imgproxy-loader.d.ts
-interface ImgproxyLoaderOptions {
-  path: string;
-  placeholder: boolean;
-  format: string;
-  params?: Record<string, string>;
-  placeholderParams?: Record<string, string>;
-  breakpoints?: number[];
-  paramsSeparator?: string;
+//#region src/react/loaders/base-loader-options.d.ts
+interface BaseLoaderOptions<T> {
+  path?: string;
+  transforms?: T;
+  /** @deprecated Use `transforms` instead. */
+  params?: any;
+}
+interface BaseGlobalLoaderOptions<T> extends BaseLoaderOptions<T> {
+  placeholderTransforms?: T;
+}
+//#endregion
+//#region src/react/loaders/imgproxy/imgproxy-options.d.ts
+type ResizeType = "fit" | "fill" | "fill-down" | "force" | "auto";
+type ResizeAlgorithm = "nearest" | "linear" | "cubic" | "lanczos2" | "lanczos3";
+type GravityType = "no" | "so" | "ea" | "we" | "noea" | "nowe" | "soea" | "sowe" | "ce";
+interface ResizeOptions {
+  resizing_type?: ResizeType;
+  width?: number;
+  height?: number;
+  enlarge?: boolean;
+  extend?: boolean;
+}
+interface SizeOptions {
+  width?: number;
+  height?: number;
+  enlarge?: boolean;
+  extend?: boolean;
+}
+interface ExtendOptions {
+  extend?: boolean;
+  gravity?: GravityType;
+}
+interface GravityOptions {
+  type: GravityType;
+  x_offset?: number;
+  y_offset?: number;
+}
+interface CropOptions {
+  width: number;
+  height: number;
+  gravity?: GravityType;
+}
+interface TrimOptions {
+  threshold: number;
+  color?: string;
+  equal_hor?: boolean;
+  equal_ver?: boolean;
+}
+interface PaddingOptions {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+interface BackgroundOptions {
+  r: number;
+  g: number;
+  b: number;
+}
+interface AdjustOptions {
+  brightness?: number;
+  contrast?: number;
+  saturation?: number;
+}
+interface BlurDetectionsOptions {
+  sigma: number;
+  class_names: string[];
 }
-declare function useImgproxyContext(): ImgproxyLoaderOptions;
+interface DrawDetectionsOptions {
+  draw: boolean;
+  class_names: string[];
+}
+interface WatermarkOptions {
+  opacity: number;
+  position?: GravityType | "re";
+  x_offset?: number;
+  y_offset?: number;
+  scale?: number;
+}
+interface WatermarkSizeOptions {
+  width: number;
+  height: number;
+}
+interface UnsharpeningOptions {
+  mode?: string;
+  weight?: number;
+  dividor?: number;
+}
+interface AutoqualityOptions {
+  method?: string;
+  target?: number;
+  min_quality?: number;
+  max_quality?: number;
+  allowed_error?: number;
+}
+interface JpegOptions {
+  progressive?: boolean;
+  no_subsample?: boolean;
+  trellis_quant?: boolean;
+  overshoot_deringing?: boolean;
+  optimize_scans?: boolean;
+  quant_table?: number;
+}
+interface PngOptions {
+  interlaced?: boolean;
+  quantize?: boolean;
+  quantization_colors?: number;
+}
+interface ImgproxyTransforms {
+  /**
+   * Defines the resizing type, width, height, enlarge, and extend.
+   * All arguments are optional and can be omitted to use their default values.
+   */
+  resize?: ResizeOptions;
+  /**
+   * Defines the width, height, enlarge, and extend.
+   * All arguments are optional and can be omitted to use their default values.
+   */
+  size?: SizeOptions;
+  /**
+   * Defines how imgproxy will resize the source image.
+   * Default: fit
+   */
+  resizing_type?: ResizeType;
+  /**
+   * Defines the algorithm that imgproxy will use for resizing.
+   * Default: lanczos3
+   */
+  resizing_algorithm?: ResizeAlgorithm;
+  /**
+   * Defines the width of the resulting image.
+   * Default: 0
+   */
+  width?: number;
+  /**
+   * Defines the height of the resulting image.
+   * Default: 0
+   */
+  height?: number;
+  /**
+   * Defines the minimum width of the resulting image.
+   * Default: 0
+   */
+  "min-width"?: number;
+  /**
+   * Defines the minimum height of the resulting image.
+   * Default: 0
+   */
+  "min-height"?: number;
+  /**
+   * When set, imgproxy will multiply the image dimensions according to these factors.
+   * Default: 1
+   */
+  zoom?: number | {
+    x: number;
+    y: number;
+  };
+  /**
+   * When set, imgproxy will multiply the image dimensions according to this factor for HiDPI (Retina) devices.
+   * Default: 1
+   */
+  dpr?: number;
+  /**
+   * When set to true, imgproxy will enlarge the image if it is smaller than the given size.
+   * Default: false
+   */
+  enlarge?: boolean;
+  /**
+   * When set to true, imgproxy will extend the image if it is smaller than the given size.
+   * Can also specify gravity.
+   * Default: false:ce:0:0
+   */
+  extend?: boolean | ExtendOptions;
+  /**
+   * When imgproxy needs to cut some parts of the image, it is guided by the gravity option.
+   * Default: ce:0:0
+   */
+  gravity?: GravityOptions;
+  /**
+   * Defines an area of the image to be processed (crop before resize).
+   */
+  crop?: CropOptions;
+  /**
+   * Removes surrounding background.
+   */
+  trim?: TrimOptions;
+  /**
+   * Defines padding size.
+   */
+  padding?: PaddingOptions;
+  /**
+   * When set to true, imgproxy will automatically rotate images based on the EXIF Orientation parameter.
+   */
+  auto_rotate?: boolean;
+  /**
+   * Rotates the image on the specified angle.
+   * Default: 0
+   */
+  rotate?: number;
+  /**
+   * When set, imgproxy will fill the resulting image background with the specified color.
+   * Default: disabled
+   */
+  background?: string | BackgroundOptions;
+  /**
+   * Adds an alpha channel to background.
+   * Default: 1
+   */
+  background_alpha?: number;
+  /**
+   * Defines the brightness, contrast, and saturation.
+   */
+  adjust?: AdjustOptions;
+  /**
+   * When set, imgproxy will adjust brightness of the resulting image.
+   * Default: 0
+   */
+  brightness?: number;
+  /**
+   * When set, imgproxy will adjust the contrast of the resulting image.
+   * Default: 1
+   */
+  contrast?: number;
+  /**
+   * When set, imgproxy will adjust saturation of the resulting image.
+   * Default: 1
+   */
+  saturation?: number;
+  /**
+   * When set, imgproxy will apply a gaussian blur filter to the resulting image.
+   * Default: disabled
+   */
+  blur?: number;
+  /**
+   * When set, imgproxy will apply the sharpen filter to the resulting image.
+   * Default: disabled
+   */
+  sharpen?: number;
+  /**
+   * When set, imgproxy will apply the pixelate filter to the resulting image.
+   * Default: disabled
+   */
+  pixelate?: number;
+  /**
+   * Allows redefining unsharpening options.
+   */
+  unsharpening?: UnsharpeningOptions;
+  /**
+   * imgproxy detects objects of the provided classes and blurs them.
+   */
+  blur_detections?: BlurDetectionsOptions;
+  /**
+   * When draw is set to true, imgproxy detects objects of the provided classes and draws their bounding boxes.
+   */
+  draw_detections?: DrawDetectionsOptions;
+  /**
+   * Places a watermark on the processed image.
+   * Default: disabled
+   */
+  watermark?: WatermarkOptions;
+  /**
+   * When set, imgproxy will use the image from the specified URL as a watermark.
+   * Default: blank
+   */
+  watermark_url?: string;
+  /**
+   * When set, imgproxy will generate an image from the provided text and use it as a watermark.
+   * Default: blank
+   */
+  watermark_text?: string;
+  /**
+   * Defines the desired width and height of the watermark.
+   * Default: 0:0
+   */
+  watermark_size?: WatermarkSizeOptions;
+  /**
+   * When set, imgproxy will prepend a <style> node with the provided content to the <svg> node.
+   * Default: blank
+   */
+  style?: string;
+  /**
+   * When set to true, imgproxy will strip the metadata (EXIF, IPTC, etc.) on JPEG and WebP output images.
+   */
+  strip_metadata?: boolean;
+  /**
+   * When set to true, imgproxy will not remove copyright info while stripping metadata.
+   */
+  keep_copyright?: boolean;
+  /**
+   * When set to true, imgproxy will transform the embedded color profile (ICC) to sRGB and remove it from the image.
+   */
+  strip_color_profile?: boolean;
+  /**
+   * When set to true and the source image has an embedded thumbnail, imgproxy will always use the embedded thumbnail.
+   */
+  enforce_thumbnail?: boolean;
+  /**
+   * When set to true, imgproxy will return attachment in the Content-Disposition header.
+   */
+  return_attachment?: boolean;
+  /**
+   * Redefines quality of the resulting image, as a percentage.
+   * Default: 0
+   */
+  quality?: number;
+  /**
+   * Adds or redefines IMGPROXY_FORMAT_QUALITY values.
+   */
+  format_quality?: Record<string, number>;
+  /**
+   * Redefines autoquality settings.
+   */
+  autoquality?: AutoqualityOptions;
+  /**
+   * When set, imgproxy automatically degrades the quality of the image until the image size is under the specified amount of bytes.
+   * Default: 0
+   */
+  max_bytes?: number;
+  /**
+   * Allows redefining JPEG saving options.
+   */
+  jpeg_options?: JpegOptions;
+  /**
+   * Allows redefining PNG saving options.
+   */
+  png_options?: PngOptions;
+  /**
+   * Specifies the resulting image format.
+   * Default: jpg
+   */
+  format?: string;
+  /**
+   * When a source image supports pagination or animation, this option allows specifying the page to use it on.
+   * Default: 0
+   */
+  page?: number;
+  /**
+   * Allows redefining IMGPROXY_VIDEO_THUMBNAIL_SECOND config.
+   */
+  video_thumbnail_second?: number;
+  /**
+   * You can use a custom fallback image by specifying its URL.
+   * Default: blank
+   */
+  fallback_image_url?: string;
+  /**
+   * When set, imgproxy will skip the processing of the listed formats.
+   * Default: empty
+   */
+  skip_processing?: string[];
+  /**
+   * Cache buster doesn't affect image processing but its changing allows for bypassing the CDN, proxy server and browser cache.
+   * Default: empty
+   */
+  cachebuster?: string;
+  /**
+   * When set, imgproxy will check the provided unix timestamp and return 404 when expired.
+   * Default: empty
+   */
+  expires?: number;
+  /**
+   * Defines a filename for the Content-Disposition header.
+   * Default: empty
+   */
+  filename?: string;
+  /**
+   * Defines a list of presets to be used by imgproxy.
+   * Default: empty
+   */
+  preset?: string[];
+}
+type ImgproxyOptions = BaseLoaderOptions<ImgproxyTransforms>;
+type ImgproxyGlobalOptions = BaseGlobalLoaderOptions<ImgproxyTransforms>;
+//#endregion
+//#region src/react/loaders/imgproxy/use-imgproxy-loader.d.ts
+declare function useImgproxyLoader(options: ImgproxyOptions): (imageOptions: ImageLoaderOptions) => string;
+//#endregion
+//#region src/react/loaders/imgproxy/imgproxy-context.d.ts
+declare function useImgproxyContext(): ImgproxyGlobalOptions;
 declare function ImgproxyLoaderProvider({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImgproxyLoaderOptions>): react_jsx_runtime0.JSX.Element;
-declare function useImgproxyLoader(options?: Partial<ImgproxyLoaderOptions>): ImageLoader;
+} & Partial<ImgproxyOptions>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/react/loaders/imgproxy/use-imgproxy-placeholder.d.ts
+declare function useImgproxyPlaceholder(options: ImgproxyOptions): (imageOptions: ImageLoaderOptions) => string;
 //#endregion
 //#region src/react/loaders/cloudflare-loader.d.ts
 interface CloudflareLoaderOptions {
@@ -132,4 +501,4 @@ declare function CloudinaryLoaderProvider({
 } & Partial<CloudinaryLoaderOptions>): react_jsx_runtime0.JSX.Element;
 declare function useCloudinaryLoader(options?: Partial<CloudinaryLoaderOptions>): ImageLoader;
 //#endregion
-export { type CloudflareLoaderOptions, CloudflareLoaderProvider, type CloudinaryLoaderOptions, CloudinaryLoaderProvider, Image, type ImageLoader, type ImageLoaderOptions, type ImageProps, ImageProvider, type ImageSrcType, type ImgproxyLoaderOptions, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useCloudinaryContext, useCloudinaryLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };
+export { type CloudflareLoaderOptions, CloudflareLoaderProvider, type CloudinaryLoaderOptions, CloudinaryLoaderProvider, Image, type ImageLoader, type ImageLoaderOptions, type ImageProps, ImageProvider, type ImageSrcType, type ImgproxyGlobalOptions, ImgproxyLoaderProvider, type ImgproxyOptions, type ImgproxyTransforms, useCloudflareContext, useCloudflareLoader, useCloudinaryContext, useCloudinaryLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader, useImgproxyPlaceholder };

package/dist/react.js

@@ -95,7 +95,7 @@ function resolveOptions(prop, defaultOptions) {
 	resolved.loading = resolveLoading(resolved);
 	resolved.srcSet = resolveSrcSet(resolved);
 	resolved.sizes = resolveSizes(resolved, resolved.srcSet, resolved.loading);
-	resolved.placeholderUrl = resolvePlaceholderURL(resolved);
+	resolved.placeholder = resolvePlaceholder(resolved, resolved.src);
 	resolved.height = resolveHeight(resolved);
 	resolved.width = resolveWidth(resolved);
 	resolved.src = resolveSrc(resolved);
@@ -117,8 +117,7 @@ function resolveSrcSet(prop) {
 	for (const breakpoint of prop.breakpoints) if (prop.loader) entries.push(`${prop.loader({
 		src: baseSrc,
 		width: breakpoint,
-		height: prop.height,
-		isPlaceholder: false
+		height: prop.height
 	})} ${breakpoint}w`);
 	if (entries.length === 0) return;
 	return entries.join(", ");
@@ -155,15 +154,15 @@ function resolveHeight(prop) {
 	if (prop.height) return prop.height;
 	if (typeof prop.src === "object") return prop.src.height;
 }
-function resolvePlaceholderURL(prop) {
-	if (prop.placeholderUrl) return prop.placeholderUrl;
-	if (typeof prop.src === "object") return prop.src.placeholderUrl;
-	if (prop.loader) return prop.loader({
-		isPlaceholder: true,
-		src: prop.src,
+function resolvePlaceholder(prop, src) {
+	if (!prop.placeholder) return null;
+	if (typeof prop.placeholder === "string") return prop.placeholder;
+	if (typeof prop.placeholder === "function") return prop.placeholder({
+		src,
 		width: prop.width,
 		height: prop.height
 	});
+	return null;
 }
 
 //#endregion
@@ -242,11 +241,11 @@ function ImageProvider({ children, ...props }) {
 //#region src/react/image.tsx
 const preload = "preload" in ReactDOM && typeof ReactDOM.preload === "function" ? ReactDOM.preload : null;
 function getPlaceholderStyles(props) {
-	if (!props.placeholderUrl) return {};
+	if (!props.placeholder) return {};
 	return {
 		backgroundPosition: "50% 50%",
 		backgroundRepeat: "no-repeat",
-		backgroundImage: `url(${props.placeholderUrl})`,
+		backgroundImage: `url(${props.placeholder})`,
 		backgroundSize: "cover"
 	};
 }
@@ -290,32 +289,216 @@ function Image(props) {
 }
 
 //#endregion
-//#region src/react/loaders/image-loader-utils.ts
-function normalizeLoaderParams(params, separator) {
-	return Object.entries(params).map(([key, value]) => `${key}${separator}${value}`);
-}
-function isAbsoluteUrl(src) {
-	return /^https?:\/\//.test(src);
+//#region src/react/loaders/loader-utils.ts
+function resolveOption(key, value, separator) {
+	return `${key}${separator}${value}`;
+}
+function resolveDeprecatedParams(source, separator) {
+	const params = [];
+	for (const key of Object.keys(params)) {
+		const value = source[key];
+		if (value !== void 0) params.push(resolveOption(key, value, separator));
+	}
+	return params;
 }
-function assertPath(path) {
-	assert(() => !path?.trim(), import.meta.env.DEV && `Path is required`);
-	assert(() => {
-		try {
-			new URL(path);
-			return !isAbsoluteUrl(path);
-		} catch {
-			return true;
-		}
-	}, import.meta.env.DEV && `Path is invalid url: ${path}`);
+
+//#endregion
+//#region src/react/loaders/imgproxy/create-imgproxy-url.ts
+const stringifyOptions = (opCode, values) => {
+	return [opCode, ...values.map((v) => v == null ? "" : encodeURIComponent(v))].join(":").replace(/:+$/, "");
+};
+const resolveObjectParam = (key, source) => {
+	if (source === void 0) return;
+	if (key === "size") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.width,
+			tSource.height,
+			tSource.enlarge,
+			tSource.extend
+		]);
+	}
+	if (key === "resize") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.resizing_type,
+			tSource.width,
+			tSource.height,
+			tSource.enlarge,
+			tSource.extend
+		]);
+	}
+	if (key === "extend") {
+		const tSource = source;
+		if (!tSource) return;
+		if (typeof tSource === "boolean") return stringifyOptions(key, [tSource]);
+		return stringifyOptions(key, [tSource.extend, tSource.gravity]);
+	}
+	if (key === "gravity") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.type,
+			tSource.x_offset,
+			tSource.y_offset
+		]);
+	}
+	if (key === "crop") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.width,
+			tSource.height,
+			tSource.gravity
+		]);
+	}
+	if (key === "trim") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.threshold,
+			tSource.color,
+			tSource.equal_hor,
+			tSource.equal_ver
+		]);
+	}
+	if (key === "padding") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.top,
+			tSource.right,
+			tSource.bottom,
+			tSource.left
+		]);
+	}
+	if (key === "background") {
+		const tSource = source;
+		if (!tSource) return;
+		if (typeof tSource === "string") return stringifyOptions(key, [tSource]);
+		return stringifyOptions(key, [
+			tSource.r,
+			tSource.g,
+			tSource.b
+		]);
+	}
+	if (key === "adjust") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.brightness,
+			tSource.contrast,
+			tSource.saturation
+		]);
+	}
+	if (key === "blur_detections") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [tSource.sigma, ...tSource.class_names]);
+	}
+	if (key === "draw_detections") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [tSource.draw, ...tSource.class_names]);
+	}
+	if (key === "watermark") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.opacity,
+			tSource.position,
+			tSource.x_offset,
+			tSource.y_offset,
+			tSource.scale
+		]);
+	}
+	if (key === "watermark_size") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [tSource.width, tSource.height]);
+	}
+	if (key === "unsharpening") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.mode,
+			tSource.weight,
+			tSource.dividor
+		]);
+	}
+	if (key === "autoquality") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.method,
+			tSource.target,
+			tSource.min_quality,
+			tSource.max_quality,
+			tSource.allowed_error
+		]);
+	}
+	if (key === "jpeg_options") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.progressive,
+			tSource.no_subsample,
+			tSource.trellis_quant,
+			tSource.overshoot_deringing,
+			tSource.optimize_scans,
+			tSource.quant_table
+		]);
+	}
+	if (key === "png_options") {
+		const tSource = source;
+		if (!tSource) return;
+		return stringifyOptions(key, [
+			tSource.interlaced,
+			tSource.quantize,
+			tSource.quantization_colors
+		]);
+	}
+	if (key === "zoom") {
+		const tSource = source;
+		if (!tSource) return;
+		if (typeof tSource === "number") return stringifyOptions(key, [tSource]);
+		return stringifyOptions(key, [tSource.x, tSource.y]);
+	}
+};
+const resolveTransforms = (transforms) => {
+	if (!transforms) return "";
+	const params = [];
+	for (const key of Object.keys(transforms)) {
+		const value = transforms[key];
+		const keyCast = key;
+		if (value === void 0) continue;
+		if (typeof value === "object") {
+			const objectParams = resolveObjectParam(keyCast, value);
+			if (objectParams) params.push(objectParams);
+		} else params.push(stringifyOptions(key, [value]));
+	}
+	return params;
+};
+function createImgproxyUrl(path, transforms, imageOptions) {
+	if (!path) throw new Error("Path must be provided");
+	const params = [];
+	if (imageOptions.width) params.push(stringifyOptions("width", [imageOptions.width]));
+	if (imageOptions.height) params.push(stringifyOptions("height", [imageOptions.height]));
+	params.push(...resolveTransforms(transforms));
+	if (params) params.push(...resolveDeprecatedParams(params, ":"));
+	return `${path}/${params.join("/")}/plain/${imageOptions.src}`;
 }
 
 //#endregion
-//#region src/react/loaders/imgproxy-loader.tsx
+//#region src/react/loaders/imgproxy/imgproxy-context.tsx
 const ImgproxyContext = createContext({
-	path: "",
-	placeholder: true,
-	format: "webp",
-	placeholderParams: { quality: "20" }
+	transforms: { format: "webp" },
+	placeholderTransforms: {
+		quality: 10,
+		format: "webp"
+	}
 });
 function useImgproxyContext() {
 	return useContext(ImgproxyContext);
@@ -330,31 +513,49 @@ function ImgproxyLoaderProvider({ children, ...props }) {
 		children
 	});
 }
+
+//#endregion
+//#region src/react/loaders/imgproxy/use-imgproxy-loader.tsx
 function useImgproxyLoader(options) {
-	const resolvedOptions = {
-		...useImgproxyContext(),
-		...options
+	const context = useImgproxyContext();
+	const path = options.path || context.path;
+	const transforms = {
+		...context.transforms,
+		...options.transforms
 	};
-	assertPath(resolvedOptions.path);
-	return (imageOptions) => {
-		const parts = [];
-		const format = resolvedOptions.format;
-		const paramsSeparator = resolvedOptions.paramsSeparator ?? "/";
-		if (format) parts.push(`format:${format}`);
-		if (imageOptions.width) parts.push(`width:${imageOptions.width}`);
-		if (imageOptions.height) parts.push(`height:${imageOptions.height}`);
-		if (imageOptions.isPlaceholder) {
-			if (resolvedOptions.placeholderParams) {
-				const placeholderParams = normalizeLoaderParams(resolvedOptions.placeholderParams, ":");
-				parts.push(...placeholderParams);
-			}
-		} else if (resolvedOptions.params) {
-			const params = normalizeLoaderParams(resolvedOptions.params, ":");
-			parts.push(...params);
-		}
-		const processingOptions = parts.join(paramsSeparator);
-		return `${resolvedOptions.path}/${processingOptions}/plain/${imageOptions.src}`;
+	return (imageOptions) => createImgproxyUrl(path, transforms, imageOptions);
+}
+
+//#endregion
+//#region src/react/loaders/imgproxy/use-imgproxy-placeholder.tsx
+function useImgproxyPlaceholder(options) {
+	const context = useImgproxyContext();
+	const path = options.path || context.path;
+	const transforms = {
+		...context.placeholderTransforms,
+		...options.transforms
 	};
+	return (imageOptions) => createImgproxyUrl(path, transforms, imageOptions);
+}
+
+//#endregion
+//#region src/react/loaders/image-loader-utils.ts
+function normalizeLoaderParams(params, separator) {
+	return Object.entries(params).map(([key, value]) => `${key}${separator}${value}`);
+}
+function isAbsoluteUrl(src) {
+	return /^https?:\/\//.test(src);
+}
+function assertPath(path) {
+	assert(() => !path?.trim(), import.meta.env.DEV && `Path is required`);
+	assert(() => {
+		try {
+			new URL(path);
+			return !isAbsoluteUrl(path);
+		} catch {
+			return true;
+		}
+	}, import.meta.env.DEV && `Path is invalid url: ${path}`);
 }
 
 //#endregion
@@ -457,4 +658,4 @@ function useCloudinaryLoader(options) {
 }
 
 //#endregion
-export { CloudflareLoaderProvider, CloudinaryLoaderProvider, Image, ImageProvider, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useCloudinaryContext, useCloudinaryLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };
+export { CloudflareLoaderProvider, CloudinaryLoaderProvider, Image, ImageProvider, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useCloudinaryContext, useCloudinaryLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader, useImgproxyPlaceholder };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "play": "vite",
     "play:build": "vite build",
     "play:preview": "vite preview",
+    "play:host": "vite --host",
     "test": "vitest",
     "coverage": "vitest --coverage",
     "typecheck": "tsc --noEmit",
@@ -54,12 +55,15 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^20.4.1",
     "@eslint/js": "^9.39.2",
+    "@tanstack/react-router": "^1.160.0",
+    "@tanstack/router-plugin": "^1.160.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@tsconfig/strictest": "^2.0.8",
     "@types/node": "^25.0.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/supertest": "^6.0.3",
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "4.0.18",
     "bumpp": "^10.3.2",
@@ -70,14 +74,16 @@
     "eslint-plugin-react-refresh": "^0.5.0",
     "globals": "^17.3.0",
     "happy-dom": "^20.6.0",
+    "memfs": "^4.56.10",
+    "supertest": "^7.2.2",
     "tsdown": "^0.18.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.0",
     "vitest": "^4.0.16",
-    "@types/supertest": "^6.0.3",
-    "memfs": "^4.56.10",
-    "supertest": "^7.2.2"
+    "tailwindcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "json-edit-react": "^1.29.0"
   },
   "dependencies": {
     "p-limit": "^7.3.0",