react-native-fast-image 10.1.1 → 10.2.0

package/dist/index.d.ts

@@ -111,6 +111,32 @@ export type Source = {
      * @default true
      */
     diskCache?: boolean;
+    /**
+     * A [ThumbHash](https://evanw.github.io/thumbhash/) of the image, shown
+     * blurred while the image loads, and if it fails to load. It's a short
+     * string you make when the image is uploaded (e.g. with the `thumbhash`
+     * package) and send with the image's url.
+     *
+     * On the web, it needs `import 'react-native-fast-image/thumbhash'` (see
+     * [ThumbHashes on the web](#thumbhashes-on-the-web)).
+     *
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri: photo.url, thumbhash: photo.thumbhash }} />
+     * ```
+     */
+    thumbhash?: string;
+    /**
+     * A tiny version of the image (e.g. 8 to 20 px) as a data uri, shown
+     * blurred while the image loads, and if it fails to load. On the web it
+     * shows without any JavaScript, e.g. in a server-rendered page.
+     *
+     * @example
+     * ```jsx
+     * <FastImage source={{ uri: photo.url, blurDataUri: photo.lqip }} />
+     * ```
+     */
+    blurDataUri?: string;
     /**
      * With several sources (`source` as an array), the image's width at this
      * uri, in pixels (times `scale`, if given).
@@ -124,6 +150,8 @@ export type Source = {
     /** With several sources, the scale `width` and `height` are multiplied by. */
     scale?: number;
 };
+/** A `thumbhash` or `blurDataUri` as `placeholder`. */
+export type SourcePlaceholder = Pick<Source, 'thumbhash' | 'blurDataUri'>;
 /** How the image fades in: see [`transition`](#transition). */
 export type Transition = {
     /**
@@ -135,7 +163,7 @@ export type Transition = {
     /**
      * Also fades between images: a new `source` replacing an image that's
      * showing cross-dissolves from it. Otherwise only an image that appears
-     * over nothing (or over `defaultSource`) fades in, and a new source
+     * over nothing (or over a placeholder) fades in, and a new source
      * replaces the image showing at once, once it has loaded.
      * @default false
      */
@@ -303,14 +331,29 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      */
     source?: Source | Source[] | ImageRequireSource;
     /**
-     * An asset loaded with `require(...)`, shown while the first image loads,
-     * and if an image fails to load. When `source` changes, the previous image
-     * shows while the new one loads instead (see `source` and
-     * `recyclingKey`).
+     * A placeholder shown while the image loads, and if it fails to load:
+     *
+     * - An image loaded with `require()`: `placeholder={require('./gray.png')}`.
+     * - A data uri: `placeholder="data:image/png;base64,…"`.
+     * - The name of an image bundled with the app (an iOS asset catalog image
+     *   or an Android drawable): `placeholder="gray"`.
+     * - A [ThumbHash](#sourcethumbhash), shown blurred:
+     *   `placeholder={{ thumbhash }}`.
+     * - A tiny image as a data uri, shown blurred:
+     *   `placeholder={{ blurDataUri }}`.
      *
-     * On Android, `defaultSource` doesn't show in debug builds: there the dev
-     * server serves `require()`d images, and `defaultSource` is only loaded
-     * from the app's resources.
+     * A source's own `thumbhash` or `blurDataUri` is shown instead, if it has
+     * one.
+     *
+     * Notes:
+     *
+     * - A url isn't loaded: it's ignored, with a warning in development.
+     * - On Android, a `require()`d image doesn't show in debug builds, where
+     *   the dev server serves it. Release builds show it.
+     */
+    placeholder?: ImageRequireSource | string | SourcePlaceholder;
+    /**
+     * @deprecated Use `placeholder`, which does the same.
      */
     defaultSource?: ImageRequireSource;
     /**
@@ -353,8 +396,8 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      *   `{ right: 10, bottom: '20%' }`. A missing axis is centered.
      *
      * Points are dp on Android. An invalid value is ignored (the image is
-     * centered), with a warning in development. `defaultSource` is placed
-     * the same way.
+     * centered), with a warning in development. Placeholders are placed the
+     * same way.
      *
      * @default '50% 50%'
      * @example
@@ -367,7 +410,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * For views that get reused for other content, such as rows in FlashList
      * or recyclerlistview. Set it to something that identifies the content,
      * e.g. the item's id. When it changes, the image is cleared right away (to
-     * `defaultSource`, or blank) instead of staying until the new one has
+     * `placeholder`, or blank) instead of staying until the new one has
      * loaded. Unlike changing `key`, this keeps the view, which is what list
      * recycling is for.
      *
@@ -477,7 +520,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * blurring a photo behind a sheet). Each change blurs the image again on
      * the CPU, so don't animate it.
      *
-     * - Only the loaded image is blurred, not `defaultSource`.
+     * - Only the loaded image is blurred, not a placeholder.
      * - An animated image (GIF, animated WebP, APNG or AVIF) shows its first frame,
      *   blurred, and doesn't animate.
      * - With `tintColor`, the blurred image is tinted.
@@ -559,7 +602,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     style?: StyleProp<ImageStyle>;
     /**
      * If supplied, changes the color of all the non-transparent pixels to the
-     * given color.
+     * given color, including the placeholder.
      */
     tintColor?: ColorValue;
     /**

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, memo } from "react";
+import React, { Children, forwardRef, memo, useMemo } from "react";
 import { Image, Platform, StyleSheet, TurboModuleRegistry, View, codegenNativeComponent } from "react-native";
 //#region src/constants.ts
 const resizeMode = {
@@ -233,10 +233,39 @@ var FastImageViewNativeComponent_default = codegenNativeComponent("FastImageView
 //#region src/specs/NativeFastImageModule.ts
 var NativeFastImageModule_default = TurboModuleRegistry.get("FastImageModule");
 //#endregion
+//#region src/placeholders.ts
+function isImageName(value) {
+	return !/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith("/");
+}
+function hasSourcePlaceholder(value) {
+	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
+}
+function dataUri(value) {
+	if (typeof value !== "string" || value === "") return void 0;
+	if (/^data:/i.test(value)) return value;
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`placeholder\` and \`blurDataUri\` don't load urls: "${value.slice(0, 60)}" is ignored. Use a data uri (data:image/…), or for \`placeholder\`, a require()d image or the name of an image bundled with the app.`, "warn");
+}
+//#endregion
 //#region src/index.tsx
-const resolveDefaultSource = (defaultSource) => {
-	if (!defaultSource) return null;
-	const resolved = Image.resolveAssetSource(defaultSource);
+function withoutPlaceholders(source) {
+	if (!hasSourcePlaceholder(source)) return source;
+	const { thumbhash: _thumbhash, blurDataUri: _blurDataUri, ...rest } = source;
+	return rest;
+}
+function sourcePlaceholder(source) {
+	if (!source || typeof source !== "object") return "";
+	const { thumbhash, blurDataUri } = source;
+	return thumbhash || dataUri(blurDataUri) || "";
+}
+const resolvePlaceholder = (placeholder) => {
+	if (typeof placeholder === "string") {
+		if (isImageName(placeholder)) return Platform.OS === "android" ? placeholder : { uri: placeholder };
+		const uri = dataUri(placeholder);
+		if (!uri) return null;
+		return Platform.OS === "android" ? uri : { uri };
+	}
+	if (!placeholder) return null;
+	const resolved = Image.resolveAssetSource(placeholder);
 	if (!resolved) return null;
 	return Platform.OS === "android" ? resolved.uri : resolved;
 };
@@ -291,7 +320,7 @@ function builtInTransition() {
 	return resolveTransition(Platform.OS === "android", NO_TRANSITION);
 }
 let defaultTransition;
-function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, forwardedRef, ...viewProps }) {
+function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, forwardedRef, ...viewProps }) {
 	var _props$recyclingKey, _defaultTransition;
 	const { fallback, resizeMode: _resizeMode, ...props } = viewProps;
 	if (__DEV__ && fallback !== void 0) warnOnce("fallback", "react-native-fast-image: `fallback` was removed in 10.0, and does nothing: images always load natively. Remove it, or use React Native's Image for those images.", "warn");
@@ -299,10 +328,18 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
-	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
-	const single = Array.isArray(source) ? source[0] : source;
-	const resolvedSource = sources ? void 0 : Image.resolveAssetSource(single);
-	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
+	const shared = hasSourcePlaceholder(placeholder) ? sourcePlaceholder(placeholder) : "";
+	const { resolvedSource, sources, sourcePlaceholders } = useMemo(() => {
+		const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
+		const single = Array.isArray(source) ? source[0] : source;
+		const placeholders = (sources !== null && sources !== void 0 ? sources : [single]).map((entry) => sourcePlaceholder(entry) || shared);
+		return {
+			resolvedSource: sources ? void 0 : Image.resolveAssetSource(withoutPlaceholders(single)),
+			sources: (sources === null || sources === void 0 ? void 0 : sources.some(hasSourcePlaceholder)) ? sources.map(withoutPlaceholders) : sources,
+			sourcePlaceholders: placeholders.some(Boolean) ? placeholders : void 0
+		};
+	}, [source, shared]);
+	const resolvedPlaceholder = resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	return /* @__PURE__ */ React.createElement(FastImageViewNativeComponent_default, {
 		...props,
 		ref: forwardedRef,
@@ -312,7 +349,8 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...resolveTransition(transition, (_defaultTransition = defaultTransition) !== null && _defaultTransition !== void 0 ? _defaultTransition : builtInTransition()),
 		source: resolvedSource,
 		sources,
-		defaultSource: resolvedDefaultSource,
+		sourcePlaceholders,
+		placeholder: resolvedPlaceholder,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: onProgress,
 		handledEvents: handledEvents({

package/dist/index.js.flow

@@ -110,6 +110,11 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type SourcePlaceholder = {
+    thumbhash?: string,
+    blurDataUri?: string,
+}
+
 export type FastImageSource = {
     uri?: string,
     headers?: Object,
@@ -118,6 +123,8 @@ export type FastImageSource = {
     cacheKey?: string,
     memoryCache?: boolean,
     diskCache?: boolean,
+    thumbhash?: string,
+    blurDataUri?: string,
     width?: number,
     height?: number,
     scale?: number,
@@ -132,6 +139,8 @@ export type FastImageProps = $ReadOnly<{|
     onProgress?: ?(event: OnProgressEvent) => void,
 
     source?: ?(FastImageSource | Array<FastImageSource> | number),
+    placeholder?: ?(number | string | SourcePlaceholder),
+    // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.web.js

@@ -240,6 +240,16 @@ function cssPosition({ x, y }) {
 	return `${axis(x)} ${axis(y)}`;
 }
 //#endregion
+//#region src/placeholders.ts
+function hasSourcePlaceholder(value) {
+	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
+}
+function dataUri(value) {
+	if (typeof value !== "string" || value === "") return void 0;
+	if (/^data:/i.test(value)) return value;
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`placeholder\` and \`blurDataUri\` don't load urls: "${value.slice(0, 60)}" is ignored. Use a data uri (data:image/…), or for \`placeholder\`, a require()d image or the name of an image bundled with the app.`, "warn");
+}
+//#endregion
 //#region src/index.web.tsx
 var _useId;
 const notSupported = {
@@ -250,7 +260,8 @@ let ids = 0;
 const useCounterId = () => useState(() => `${++ids}`)[0];
 const useSvgId = (_useId = React.useId) !== null && _useId !== void 0 ? _useId : useCounterId;
 const useClientLayoutEffect = globalThis.document === void 0 ? useEffect : useLayoutEffect;
-function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+function FastImageBase({ source, placeholder, defaultSource, tintColor, blurRadius, onLoadStart, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, forwardedRef, onLayout, pointerEvents, recyclingKey: _recyclingKey, loop: _loop, imageRendering: _imageRendering, paused: _paused, transition: _transition, downsample: _downsample, onProgress: _onProgress, ...props }) {
+	var _resolveUri;
 	if (typeof __DEV__ !== "undefined" && __DEV__) warnIfChildren(children);
 	const { accessibilityLabel, "aria-label": ariaLabel, resizeMode: _resizeMode, ...viewProps } = props;
 	const label = ariaLabel || accessibilityLabel || void 0;
@@ -259,10 +270,14 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	const src = sized ? sized.src : resolveUri(source);
 	const srcSet = sized === null || sized === void 0 ? void 0 : sized.srcSet;
 	const key = srcSet !== null && srcSet !== void 0 ? srcSet : src;
-	const defaultUri = resolveUri(defaultSource);
+	const preview = hasSourcePlaceholder(placeholder) ? placeholder : void 0;
+	const blurUri = (_resolveUri = resolveUri(dataUri(shared(source, "blurDataUri", preview)))) !== null && _resolveUri !== void 0 ? _resolveUri : thumbhashUri(shared(source, "thumbhash", preview));
+	const defaultUri = blurUri !== null && blurUri !== void 0 ? blurUri : resolveUri(preview ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	const [result, setResult] = useState();
 	const ok = result && result.key === key ? result.ok : void 0;
-	const tintId = `fast-image-tint-${useSvgId().replace(/[^\w-]/g, "")}`;
+	const svgId = useSvgId().replace(/[^\w-]/g, "");
+	const tintId = `fast-image-tint-${svgId}`;
+	const blurId = `fast-image-blur-${svgId}`;
 	const fit = resolveObjectFit(objectFit, style);
 	const position = cssPosition(objectPositionOrCentered(objectPosition));
 	const filter = [blurRadius ? `blur(${blurRadius}px)` : "", tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") || void 0;
@@ -280,9 +295,9 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	}, defaultUri && showDefault ? /* @__PURE__ */ React.createElement(Picture, {
 		key: `default ${defaultUri}`,
 		src: defaultUri,
-		fit,
+		fit: blurUri && (fit === "scale-down" || fit === "none") ? "contain" : fit,
 		position,
-		filter,
+		filter: blurUri ? [`url(#${blurId})`, tintColor ? `url(#${tintId})` : ""].filter(Boolean).join(" ") : filter,
 		alt: key ? "" : label !== null && label !== void 0 ? label : ""
 	}) : null, key && src ? /* @__PURE__ */ React.createElement(Picture, {
 		key: several ? "sizes" : key,
@@ -325,7 +340,21 @@ function FastImageBase({ source, defaultSource, tintColor, blurRadius, onLoadSta
 	}) : null, tintColor ? /* @__PURE__ */ React.createElement(TintFilter, {
 		id: tintId,
 		color: tintColor
-	}) : null);
+	}) : null, blurUri && showDefault ? /* @__PURE__ */ React.createElement(PreviewBlur, { id: blurId }) : null);
+}
+function thumbhashUri(hash) {
+	if (!hash) return void 0;
+	const decode = globalThis[Symbol.for("react-native-fast-image/thumbhash")];
+	if (decode) return decode(hash);
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("thumbhash-web", "react-native-fast-image: on the web, a `thumbhash` shows only with `import 'react-native-fast-image/thumbhash'` (it decodes them). Or make it a `blurDataUri` before it reaches the browser (e.g. on your server) with that module's thumbHashToBlurDataUri, which needs no JavaScript in the browser.", "warn");
+}
+function shared(source, key, preview) {
+	const values = (Array.isArray(source) ? source : [source]).map((entry) => {
+		var _ref;
+		const own = entry && typeof entry === "object" ? entry : void 0;
+		return (_ref = (own === null || own === void 0 ? void 0 : own.thumbhash) || dataUri(own === null || own === void 0 ? void 0 : own.blurDataUri) ? own : preview) === null || _ref === void 0 ? void 0 : _ref[key];
+	});
+	return values.every((value) => value && value === values[0]) ? values[0] : void 0;
 }
 function resolveUri(source) {
 	let uri;
@@ -437,6 +466,20 @@ function TintFilter({ id, color }) {
 		operator: "in"
 	}))));
 }
+function PreviewBlur({ id }) {
+	return /* @__PURE__ */ React.createElement("svg", { style: tintStyle }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", {
+		id,
+		x: "0",
+		y: "0",
+		width: "1",
+		height: "1",
+		primitiveUnits: "objectBoundingBox",
+		colorInterpolationFilters: "sRGB"
+	}, /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "0.06" }), /* @__PURE__ */ React.createElement("feComponentTransfer", null, /* @__PURE__ */ React.createElement("feFuncA", {
+		type: "table",
+		tableValues: "0 1 1 1 1"
+	})))));
+}
 const tintStyle = {
 	position: "absolute",
 	width: 0,

package/dist/index.web.js.flow

@@ -110,6 +110,11 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type SourcePlaceholder = {
+    thumbhash?: string,
+    blurDataUri?: string,
+}
+
 export type FastImageSource = {
     uri?: string,
     headers?: Object,
@@ -118,6 +123,8 @@ export type FastImageSource = {
     cacheKey?: string,
     memoryCache?: boolean,
     diskCache?: boolean,
+    thumbhash?: string,
+    blurDataUri?: string,
     width?: number,
     height?: number,
     scale?: number,
@@ -132,6 +139,8 @@ export type FastImageProps = $ReadOnly<{|
     onProgress?: ?(event: OnProgressEvent) => void,
 
     source?: ?(FastImageSource | Array<FastImageSource> | number),
+    placeholder?: ?(number | string | SourcePlaceholder),
+    // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/placeholders.d.ts

@@ -0,0 +1,4 @@
+import type { SourcePlaceholder } from './index';
+export declare function isImageName(value: string): boolean;
+export declare function hasSourcePlaceholder(value: unknown): value is SourcePlaceholder;
+export declare function dataUri(value: unknown): string | undefined;

package/dist/specs/FastImageViewNativeComponent.d.ts

@@ -21,7 +21,8 @@ type LoadEndEvent = Readonly<{
 export interface NativeProps extends ViewProps {
     source?: CodegenTypes.UnsafeMixed;
     sources?: CodegenTypes.UnsafeMixed;
-    defaultSource?: CodegenTypes.UnsafeMixed;
+    placeholder?: CodegenTypes.UnsafeMixed;
+    sourcePlaceholders?: ReadonlyArray<string>;
     objectFit?: CodegenTypes.WithDefault<string, 'cover'>;
     objectPositionX?: CodegenTypes.WithDefault<CodegenTypes.Float, 0.5>;
     objectPositionXOffset?: CodegenTypes.Float;

package/dist/thumbhash.cjs.js

@@ -0,0 +1,241 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/thumbhash.ts
+const cache = /* @__PURE__ */ new Map();
+const CACHE_SIZE = 256;
+/**
+* Makes a source's `blurDataUri` from a ThumbHash, e.g. on your server, so
+* the page shows the preview without any JavaScript. Undefined for an invalid
+* hash. Works in browsers, Node and React Native.
+*
+* @example
+* ```js
+* // e.g. on your server, so the page shows the preview without any JavaScript
+* const source = { uri: photo.url, blurDataUri: thumbHashToBlurDataUri(photo.thumbhash) }
+* ```
+*/
+function thumbHashToBlurDataUri(thumbhash) {
+	if (!thumbhash) return void 0;
+	if (cache.has(thumbhash)) {
+		const uri = cache.get(thumbhash);
+		cache.delete(thumbhash);
+		cache.set(thumbhash, uri);
+		return uri;
+	}
+	const hash = base64Bytes(thumbhash);
+	const image = hash ? thumbHashToRGBA(hash) : void 0;
+	const small = image ? shrink(image.w, image.h, image.rgba, 8) : void 0;
+	const uri = small ? rgbaToDataURL(small.w, small.h, small.rgba) : void 0;
+	if (cache.size >= CACHE_SIZE) cache.delete(cache.keys().next().value);
+	cache.set(thumbhash, uri);
+	return uri;
+}
+globalThis[Symbol.for("react-native-fast-image/thumbhash")] = thumbHashToBlurDataUri;
+function shrink(w, h, rgba, max) {
+	const scale = Math.max(w, h) / max;
+	if (scale <= 1) return {
+		w,
+		h,
+		rgba
+	};
+	const sw = Math.max(1, Math.round(w / scale));
+	const sh = Math.max(1, Math.round(h / scale));
+	const out = new Uint8Array(sw * sh * 4);
+	for (let y = 0; y < sh; y++) {
+		const y0 = Math.floor(y * h / sh);
+		const y1 = Math.floor((y + 1) * h / sh);
+		for (let x = 0; x < sw; x++) {
+			const x0 = Math.floor(x * w / sw);
+			const x1 = Math.floor((x + 1) * w / sw);
+			for (let c = 0; c < 4; c++) {
+				let sum = 0;
+				for (let yy = y0; yy < y1; yy++) for (let xx = x0; xx < x1; xx++) sum += rgba[(yy * w + xx) * 4 + c];
+				out[(y * sw + x) * 4 + c] = Math.round(sum / ((y1 - y0) * (x1 - x0)));
+			}
+		}
+	}
+	return {
+		w: sw,
+		h: sh,
+		rgba: out
+	};
+}
+function base64Bytes(base64) {
+	const standard = base64.trim().replace(/-/g, "+").replace(/_/g, "/");
+	if (!/^[A-Za-z0-9+/]*=*$/.test(standard)) return void 0;
+	try {
+		const binary = atob(standard.replace(/=+$/, "") + "=".repeat((4 - standard.replace(/=+$/, "").length % 4) % 4));
+		return Uint8Array.from(binary, (c) => c.charCodeAt(0));
+	} catch {
+		return;
+	}
+}
+function count(nx, ny) {
+	let n = 0;
+	for (let cy = 0; cy < ny; cy++) for (let cx = cy ? 0 : 1; cx * ny < nx * (ny - cy); cx++) n++;
+	return n;
+}
+function thumbHashToRGBA(hash) {
+	const { PI, min, max, cos, round } = Math;
+	if (hash.length < 5) return void 0;
+	const header24 = hash[0] | hash[1] << 8 | hash[2] << 16;
+	const header16 = hash[3] | hash[4] << 8;
+	const l_dc = (header24 & 63) / 63;
+	const p_dc = (header24 >> 6 & 63) / 31.5 - 1;
+	const q_dc = (header24 >> 12 & 63) / 31.5 - 1;
+	const l_scale = (header24 >> 18 & 31) / 31;
+	const hasAlpha = header24 >> 23;
+	const p_scale = (header16 >> 3 & 63) / 63;
+	const q_scale = (header16 >> 9 & 63) / 63;
+	const isLandscape = header16 >> 15;
+	const lx = max(3, isLandscape ? hasAlpha ? 5 : 7 : header16 & 7);
+	const ly = max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7);
+	const ac_start = hasAlpha ? 6 : 5;
+	const ac_count = count(lx, ly) + 2 * count(3, 3) + (hasAlpha ? count(5, 5) : 0);
+	if (hash.length < ac_start + Math.ceil(ac_count / 2)) return void 0;
+	const a_dc = hasAlpha ? (hash[5] & 15) / 15 : 1;
+	const a_scale = (hash[5] >> 4) / 15;
+	let ac_index = 0;
+	const decodeChannel = (nx, ny, scale) => {
+		const ac = [];
+		for (let cy = 0; cy < ny; cy++) for (let cx = cy ? 0 : 1; cx * ny < nx * (ny - cy); cx++) ac.push(((hash[ac_start + (ac_index >> 1)] >> ((ac_index++ & 1) << 2) & 15) / 7.5 - 1) * scale);
+		return ac;
+	};
+	const l_ac = decodeChannel(lx, ly, l_scale);
+	const p_ac = decodeChannel(3, 3, p_scale * 1.25);
+	const q_ac = decodeChannel(3, 3, q_scale * 1.25);
+	const a_ac = hasAlpha ? decodeChannel(5, 5, a_scale) : [];
+	const ratio = thumbHashToApproximateAspectRatio(hash);
+	const w = max(1, round(ratio > 1 ? 32 : 32 * ratio));
+	const h = max(1, round(ratio > 1 ? 32 / ratio : 32));
+	const rgba = new Uint8Array(w * h * 4);
+	const fx = [];
+	const fy = [];
+	for (let y = 0, i = 0; y < h; y++) for (let x = 0; x < w; x++, i += 4) {
+		let l = l_dc, p = p_dc, q = q_dc, a = a_dc;
+		for (let cx = 0, n = max(lx, hasAlpha ? 5 : 3); cx < n; cx++) fx[cx] = cos(PI / w * (x + .5) * cx);
+		for (let cy = 0, n = max(ly, hasAlpha ? 5 : 3); cy < n; cy++) fy[cy] = cos(PI / h * (y + .5) * cy);
+		for (let cy = 0, j = 0; cy < ly; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx * ly < lx * (ly - cy); cx++, j++) l += l_ac[j] * fx[cx] * fy2;
+		for (let cy = 0, j = 0; cy < 3; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {
+			const f = fx[cx] * fy2;
+			p += p_ac[j] * f;
+			q += q_ac[j] * f;
+		}
+		if (hasAlpha) for (let cy = 0, j = 0; cy < 5; cy++) for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 5 - cy; cx++, j++) a += a_ac[j] * fx[cx] * fy2;
+		const b = l - 2 / 3 * p;
+		const r = (3 * l - b + q) / 2;
+		const g = r - q;
+		rgba[i] = max(0, 255 * min(1, r));
+		rgba[i + 1] = max(0, 255 * min(1, g));
+		rgba[i + 2] = max(0, 255 * min(1, b));
+		rgba[i + 3] = max(0, 255 * min(1, a));
+	}
+	return {
+		w,
+		h,
+		rgba
+	};
+}
+function thumbHashToApproximateAspectRatio(hash) {
+	const header = hash[3];
+	const hasAlpha = hash[2] & 128;
+	const isLandscape = hash[4] & 128;
+	const lx = isLandscape ? hasAlpha ? 5 : 7 : header & 7;
+	const ly = isLandscape ? header & 7 : hasAlpha ? 5 : 7;
+	return ly ? lx / ly : 1;
+}
+function rgbaToDataURL(w, h, rgba) {
+	const row = w * 4 + 1;
+	const idat = 6 + h * (5 + row);
+	const bytes = [
+		137,
+		80,
+		78,
+		71,
+		13,
+		10,
+		26,
+		10,
+		0,
+		0,
+		0,
+		13,
+		73,
+		72,
+		68,
+		82,
+		0,
+		0,
+		w >> 8,
+		w & 255,
+		0,
+		0,
+		h >> 8,
+		h & 255,
+		8,
+		6,
+		0,
+		0,
+		0,
+		0,
+		0,
+		0,
+		0,
+		idat >>> 24,
+		idat >> 16 & 255,
+		idat >> 8 & 255,
+		idat & 255,
+		73,
+		68,
+		65,
+		84,
+		120,
+		1
+	];
+	const table = [
+		0,
+		498536548,
+		997073096,
+		651767980,
+		1994146192,
+		1802195444,
+		1303535960,
+		1342533948,
+		-306674912,
+		-267414716,
+		-690576408,
+		-882789492,
+		-1687895376,
+		-2032938284,
+		-1609899400,
+		-1111625188
+	];
+	let a = 1, b = 0;
+	for (let y = 0, i = 0, end = row - 1; y < h; y++, end += row - 1) {
+		bytes.push(y + 1 < h ? 0 : 1, row & 255, row >> 8, ~row & 255, row >> 8 ^ 255, 0);
+		for (b = (b + a) % 65521; i < end; i++) {
+			const u = rgba[i] & 255;
+			bytes.push(u);
+			a = (a + u) % 65521;
+			b = (b + a) % 65521;
+		}
+	}
+	bytes.push(b >> 8, b & 255, a >> 8, a & 255, 0, 0, 0, 0, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130);
+	for (let [start, end] of [[12, 29], [37, 41 + idat]]) {
+		let c = -1;
+		for (let i = start; i < end; i++) {
+			c ^= bytes[i];
+			c = c >>> 4 ^ table[c & 15];
+			c = c >>> 4 ^ table[c & 15];
+		}
+		c = ~c;
+		bytes[end++] = c >>> 24;
+		bytes[end++] = c >> 16 & 255;
+		bytes[end++] = c >> 8 & 255;
+		bytes[end++] = c & 255;
+	}
+	let binary = "";
+	for (const byte of bytes) binary += String.fromCharCode(byte);
+	return "data:image/png;base64," + btoa(binary);
+}
+//#endregion
+exports.thumbHashToBlurDataUri = thumbHashToBlurDataUri;

package/dist/thumbhash.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Makes a source's `blurDataUri` from a ThumbHash, e.g. on your server, so
+ * the page shows the preview without any JavaScript. Undefined for an invalid
+ * hash. Works in browsers, Node and React Native.
+ *
+ * @example
+ * ```js
+ * // e.g. on your server, so the page shows the preview without any JavaScript
+ * const source = { uri: photo.url, blurDataUri: thumbHashToBlurDataUri(photo.thumbhash) }
+ * ```
+ */
+export declare function thumbHashToBlurDataUri(thumbhash: string | undefined): string | undefined;