react-native-fast-image 10.1.1 → 10.3.0

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo } from 'react'
+import React, { forwardRef, memo, useMemo } from 'react'
 import {
     ColorValue,
     View,
@@ -16,6 +16,7 @@ import { fromStyle, resolveObjectFit } from './objectFit'
 import { objectPositionOrCentered, type ObjectPosition } from './objectPosition'
 import FastImageView from './specs/FastImageViewNativeComponent'
 import NativeFastImageModule from './specs/NativeFastImageModule'
+import { dataUri, hasSourcePlaceholder, isImageName } from './placeholders'
 import { warnIfChildren, warnOnce } from './warnings'
 
 /** How the image fits the view: see [`objectFit`](#objectfit). */
@@ -53,6 +54,8 @@ export type Source = {
      * - `'normal'`: the default.
      * - `'high'`: e.g. the image the screen is about.
      *
+     * On the web, it's the image's `fetchpriority`.
+     *
      * @default 'normal'
      */
     priority?: Priority
@@ -129,6 +132,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).
@@ -143,6 +172,9 @@ export type Source = {
     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 = {
     /**
@@ -154,7 +186,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
      */
@@ -323,14 +355,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 }}`.
+     *
+     * A source's own `thumbhash` or `blurDataUri` is shown instead, if it has
+     * one.
      *
-     * 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.
+     * 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
     /**
@@ -373,8 +420,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
@@ -387,7 +434,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.
      *
@@ -429,6 +476,25 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * @default 'auto'
      */
     imageRendering?: 'auto' | 'smooth' | 'pixelated'
+    /**
+     * Whether the image loads as it nears the screen (`'lazy'`) or at once
+     * (`'eager'`).
+     *
+     * @default 'lazy'
+     * @platform web
+     */
+    loading?: 'lazy' | 'eager'
+    /**
+     * With several sources, the width the image is shown at, as the image's
+     * [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#sizes),
+     * so the browser loads the size that fits. The default is the width the
+     * image is laid out at, which needs `loading="lazy"` (otherwise, or in
+     * browsers without it, the window's width).
+     *
+     * @default 'auto, 100vw'
+     * @platform web
+     */
+    sizes?: string
     /**
      * Pauses an animated image (GIF, animated WebP, APNG, or animated AVIF) on
      * the frame it's showing; `false` plays it again from there
@@ -499,7 +565,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.
@@ -588,7 +654,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
 
     /**
      * If supplied, changes the color of all the non-transparent pixels to the
-     * given color.
+     * given color, including the placeholder.
      */
     tintColor?: ColorValue
 
@@ -601,13 +667,46 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     children?: "FastImage doesn't take children: use FastImageBackground for content over an image"
 }
 
-const resolveDefaultSource = (
-    defaultSource?: ImageRequireSource,
+// A source without its thumbhash and blurDataUri.
+function withoutPlaceholders<T>(source: T): T {
+    if (!hasSourcePlaceholder(source)) return source
+    const {
+        thumbhash: _thumbhash,
+        blurDataUri: _blurDataUri,
+        ...rest
+    } = source as Source
+    return rest as T
+}
+
+// What the native view shows while a source loads: its ThumbHash (decoded
+// natively), or its blurDataUri, or '' for neither.
+function sourcePlaceholder(source: unknown): string {
+    if (!source || typeof source !== 'object') return ''
+    const { thumbhash, blurDataUri } = source as Source
+    return thumbhash || dataUri(blurDataUri) || ''
+}
+
+const resolvePlaceholder = (
+    placeholder?: ImageRequireSource | string,
 ): string | object | null => {
-    if (!defaultSource) {
+    if (typeof placeholder === 'string') {
+        // An image bundled with the app, by name, as React Native's Image
+        // takes it ({ uri: name }).
+        if (isImageName(placeholder)) {
+            return Platform.OS === 'android'
+                ? placeholder
+                : { uri: placeholder }
+        }
+        const uri = dataUri(placeholder)
+        if (!uri) return null
+        // Android decodes it; iOS takes it as an image source, as it does a
+        // require()d image's.
+        return Platform.OS === 'android' ? uri : { uri }
+    }
+    if (!placeholder) {
         return null
     }
-    const resolved = Image.resolveAssetSource(defaultSource)
+    const resolved = Image.resolveAssetSource(placeholder)
     if (!resolved) {
         return null
     }
@@ -719,6 +818,7 @@ declare const __DEV__: boolean
 
 function FastImageBase({
     source,
+    placeholder,
     defaultSource,
     tintColor,
     onLoadStart,
@@ -732,6 +832,9 @@ function FastImageBase({
     objectPosition,
     loop,
     transition,
+    // Web only.
+    loading: _loading,
+    sizes: _sizes,
     forwardedRef,
     ...viewProps
 }: FastImageProps & { forwardedRef: React.Ref<any> }) {
@@ -765,18 +868,49 @@ function FastImageBase({
     const fit = resolveObjectFit(objectFit, style)
     const position = objectPositionOrCentered(objectPosition)
 
-    // Several sources are picked from natively, for the view's size; one in
-    // an array is a plain source.
-    const sources = Array.isArray(source)
-        ? source.length === 1
-            ? undefined
-            : source
-        : undefined
-    const single = Array.isArray(source) ? source[0] : source
-    const resolvedSource = sources
-        ? undefined
-        : Image.resolveAssetSource(single as any)
-    const resolvedDefaultSource = resolveDefaultSource(defaultSource)
+    // Memoized on source, so an unchanged source reaches the native view as
+    // the same objects, and React's prop diff stops at them.
+    // `placeholder` as a thumbhash or blurDataUri, for the sources without
+    // their own: a string, so an object made on every render doesn't make
+    // new sourcePlaceholders.
+    const shared = hasSourcePlaceholder(placeholder)
+        ? sourcePlaceholder(placeholder)
+        : ''
+    const { resolvedSource, sources, sourcePlaceholders } = useMemo(() => {
+        // Several sources are picked from natively, for the view's size; one
+        // in an array is a plain source.
+        const sources = Array.isArray(source)
+            ? source.length === 1
+                ? undefined
+                : source
+            : undefined
+        const single = Array.isArray(source) ? source[0] : source
+        // Sources' thumbhashes and blurDataUris go to the native view apart
+        // from the sources, so a new one for the same image doesn't load it
+        // again, by the source's index ('' for none). A source's own wins
+        // over `placeholder`'s.
+        const placeholders = (sources ?? [single]).map(
+            (entry) => sourcePlaceholder(entry) || shared,
+        )
+        return {
+            resolvedSource: sources
+                ? undefined
+                : Image.resolveAssetSource(withoutPlaceholders(single) as any),
+            sources: sources?.some(hasSourcePlaceholder)
+                ? sources.map(withoutPlaceholders)
+                : sources,
+            sourcePlaceholders: placeholders.some(Boolean)
+                ? placeholders
+                : undefined,
+        }
+    }, [source, shared])
+    // A thumbhash or blurDataUri in `placeholder` goes in sourcePlaceholders
+    // instead: it isn't an image to show as it is, but defaultSource still is.
+    const resolvedPlaceholder = resolvePlaceholder(
+        hasSourcePlaceholder(placeholder)
+            ? defaultSource
+            : (placeholder ?? defaultSource),
+    )
 
     return (
         <FastImageView
@@ -794,7 +928,8 @@ function FastImageBase({
             )}
             source={resolvedSource}
             sources={sources}
-            defaultSource={resolvedDefaultSource}
+            sourcePlaceholders={sourcePlaceholders}
+            placeholder={resolvedPlaceholder}
             onFastImageLoadStart={onLoadStart}
             onFastImageProgress={onProgress}
             // The native views only send the events with a handler (and only

package/src/index.web.tsx

@@ -5,20 +5,23 @@
 //
 // The View (a div) has FastImage's style, ref and View props. The <img> fills
 // it inside its borders, with object-fit for objectFit (see Picture).
-// defaultSource is a second <img> under it until the image has loaded (the
+// The placeholder is a second <img> under it until the image has loaded (the
 // browser draws the image over it as it arrives), and tintColor is an SVG
 // filter next to them.
 //
-// Works: source (uri, require(), or several sizes: see sizedSources),
-// defaultSource, objectFit, objectPosition, tintColor, blurRadius, style,
-// onLoadStart, onLoad, onError, onLoadEnd, and View props (testID,
-// accessibility, onLayout, pointerEvents). The native-only props (cache,
-// priority, headers, transition, downsample, loop, paused, imageRendering,
-// recyclingKey) and onProgress are ignored.
+// Works: source (uri, require(), or several sizes: see sizedSources, and
+// thumbhash and blurDataUri), placeholder (and defaultSource), objectFit,
+// objectPosition, tintColor, blurRadius, style, source.priority (as
+// fetchpriority), the web-only loading and sizes, onLoadStart, onLoad,
+// onError, onLoadEnd, and View props (testID, accessibility, onLayout,
+// pointerEvents). The native-only props (cache, headers, transition,
+// downsample, loop, paused, imageRendering, recyclingKey) and onProgress
+// are ignored.
 import React, {
     forwardRef,
     memo,
     useEffect,
+    useId,
     useLayoutEffect,
     useRef,
     useState,
@@ -29,7 +32,8 @@ import { getAssetByID } from 'react-native-web/dist/modules/AssetRegistry'
 import { cacheControl, priority, resizeMode } from './constants'
 import { resolveObjectFit } from './objectFit'
 import { cssPosition, objectPositionOrCentered } from './objectPosition'
-import { warnIfChildren } from './warnings'
+import { dataUri, hasSourcePlaceholder } from './placeholders'
+import { warnIfChildren, warnOnce } from './warnings'
 import type {
     CachePathResult,
     CacheState,
@@ -38,7 +42,9 @@ import type {
     FastImageStaticProperties,
     ObjectFit,
     PreloadResult,
+    Priority,
     Source,
+    SourcePlaceholder,
 } from './index'
 
 export type * from './index'
@@ -49,15 +55,6 @@ const notSupported: CachePathResult = {
     error: 'Not supported on the web',
 }
 
-// An id that's the same on the server and in the browser: React's useId,
-// from React 18 (this package's React types are older), without the
-// characters an SVG id can't have (:r0: in React 18, «r0» in React 19). On
-// React 17, a counter's (which can differ from the server's).
-let ids = 0
-const useCounterId = () => useState(() => `${++ids}`)[0]
-const useSvgId: () => string =
-    (React as unknown as { useId?: () => string }).useId ?? useCounterId
-
 // A layout effect in the browser (it runs before the image can show), and an
 // effect when rendering on a server, where layout effects warn.
 const useClientLayoutEffect =
@@ -71,6 +68,7 @@ declare const __DEV__: boolean | undefined
 
 function FastImageBase({
     source,
+    placeholder,
     defaultSource,
     tintColor,
     blurRadius,
@@ -82,6 +80,8 @@ function FastImageBase({
     children,
     objectFit,
     objectPosition,
+    loading,
+    sizes,
     forwardedRef,
     // On the wrapper, the view the layout and touches are for here (on
     // native, FastImage's only view).
@@ -121,13 +121,29 @@ function FastImageBase({
     // one doesn't stay while it loads; with several sizes, the <img> stays,
     // and the browser shows the previous image until the new one has loaded.
     const key = srcSet ?? src
-    const defaultUri = resolveUri(defaultSource)
+    const priority = sourcePriority(source)
+    // The source's blurDataUri, or its ThumbHash made into one (with
+    // `react-native-fast-image/thumbhash`), shows blurred (see PreviewBlur)
+    // in place of `placeholder` (or `placeholder`'s, for a source without its
+    // own). With several sizes the browser picks one itself (from the srcset,
+    // as it loads), so they only show if all the sizes have the same one.
+    const preview = hasSourcePlaceholder(placeholder) ? placeholder : undefined
+    const blurUri =
+        resolveUri(dataUri(shared(source, 'blurDataUri', preview))) ??
+        thumbhashUri(shared(source, 'thumbhash', preview))
+    // A thumbhash or blurDataUri in `placeholder` isn't an image to show as it
+    // is: defaultSource still is.
+    const defaultUri =
+        blurUri ??
+        resolveUri(preview ? defaultSource : (placeholder ?? defaultSource))
     // Whether the image for `key` loaded, or failed.
     const [result, setResult] = useState<{ key: string; ok: boolean }>()
     const ok = result && result.key === key ? result.ok : undefined
     // The same on the server and in the browser. React's ids have characters
     // an SVG id can't (:r0: in React 18, «r0» in React 19).
-    const tintId = `fast-image-tint-${useSvgId().replace(/[^\w-]/g, '')}`
+    const svgId = useId().replace(/[^\w-]/g, '')
+    const tintId = `fast-image-tint-${svgId}`
+    const blurId = `fast-image-blur-${svgId}`
     // objectFit (the prop, then style's).
     const fit = resolveObjectFit(objectFit, style)
     const position = cssPosition(objectPositionOrCentered(objectPosition))
@@ -138,7 +154,7 @@ function FastImageBase({
         ]
             .filter(Boolean)
             .join(' ') || undefined
-    // defaultSource shows until the image has loaded, and if it fails.
+    // The placeholder shows until the image has loaded, and if it fails.
     const showDefault = !!defaultUri && ok !== true
 
     useClientLayoutEffect(() => {
@@ -160,9 +176,31 @@ function FastImageBase({
                 <Picture
                     key={`default ${defaultUri}`}
                     src={defaultUri}
-                    fit={fit}
+                    // Loaded when the image is (a data uri needs no request).
+                    loading={loading}
+                    priority={priority}
+                    // A source's placeholder stands for an image whose size
+                    // isn't known yet: as contain for scale-down and none,
+                    // which show an image at its own size.
+                    fit={
+                        blurUri && (fit === 'scale-down' || fit === 'none')
+                            ? 'contain'
+                            : fit
+                    }
                     position={position}
-                    filter={filter}
+                    // A source's preview gets its own blur and the tint, not
+                    // blurRadius (it's blurred already), as on iOS and
+                    // Android.
+                    filter={
+                        blurUri
+                            ? [
+                                  `url(#${blurId})`,
+                                  tintColor ? `url(#${tintId})` : '',
+                              ]
+                                  .filter(Boolean)
+                                  .join(' ')
+                            : filter
+                    }
                     // The image has the label, if there is one.
                     alt={key ? '' : (label ?? '')}
                 />
@@ -172,11 +210,13 @@ function FastImageBase({
                     key={several ? 'sizes' : key}
                     src={src}
                     srcSet={srcSet}
-                    lazy={!!several}
+                    sizes={sizes}
+                    loading={loading}
+                    priority={priority}
                     fit={fit}
                     position={position}
                     filter={filter}
-                    // Shown as it loads, over defaultSource, and not if it
+                    // Shown as it loads, over the placeholder, and not if it
                     // failed (no broken image icon or alt text).
                     hidden={ok === false}
                     alt={label ?? ''}
@@ -195,11 +235,66 @@ function FastImageBase({
                 />
             ) : null}
             {tintColor ? <TintFilter id={tintId} color={tintColor} /> : null}
+            {blurUri && showDefault ? <PreviewBlur id={blurId} /> : null}
         </View>
     )
 }
 
-// A source's (or defaultSource's) uri. Expo's web builds make a require()d
+// A ThumbHash as a blurDataUri, with `react-native-fast-image/thumbhash`
+// imported (see thumbhash.ts). Without it, ignored, with a warning in
+// development: FastImage doesn't bundle the decoder on the web.
+function thumbhashUri(hash: string | undefined): string | undefined {
+    if (!hash) return undefined
+    const decode = (globalThis as Record<symbol, unknown>)[
+        Symbol.for('react-native-fast-image/thumbhash')
+    ] as ((hash: string) => string | undefined) | undefined
+    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',
+        )
+    }
+    return undefined
+}
+
+// A source's priority: one source's, or the highest of several sizes'.
+function sourcePriority(
+    source: FastImageProps['source'],
+): Priority | undefined {
+    const values = (Array.isArray(source) ? source : [source]).map((entry) =>
+        entry && typeof entry === 'object'
+            ? (entry as Source).priority
+            : undefined,
+    )
+    return (['high', 'normal', 'low'] as const).find((priority) =>
+        values.includes(priority),
+    )
+}
+
+// The thumbhash or blurDataUri a source shows: its own, or `placeholder`'s
+// (preview) if it has neither. With several sources, the one they all show.
+function shared(
+    source: FastImageProps['source'],
+    key: 'thumbhash' | 'blurDataUri',
+    preview: SourcePlaceholder | undefined,
+): string | undefined {
+    const values = (Array.isArray(source) ? source : [source]).map((entry) => {
+        const own =
+            entry && typeof entry === 'object' ? (entry as Source) : undefined
+        // A blurDataUri that isn't a data uri is ignored (with a warning), as
+        // on iOS and Android.
+        return (own?.thumbhash || dataUri(own?.blurDataUri) ? own : preview)?.[
+            key
+        ]
+    })
+    return values.every((value) => value && value === values[0])
+        ? values[0]
+        : undefined
+}
+
+// A source's (or a placeholder's) uri. Expo's web builds make a require()d
 // image a { uri, width, height } object (or a string). Other setups can make
 // it a number in react-native-web's asset registry, resolved as its Image
 // does: the file for the scale closest to the screen's.
@@ -242,9 +337,9 @@ type PackagerAsset = {
 // Several sizes of an image, as a srcset (each size's width, times its
 // scale), from which the browser loads the one for the image's width in
 // device pixels, usually the smallest at least as wide, as expo-image does.
-// sizes="auto" has the browser use the width the image is laid out at; it
-// only applies to lazy images, and browsers without it use the next value,
-// 100vw (the viewport's width). src is the largest, for browsers without
+// sizes="auto" (the default sizes) has the browser use the width the image
+// is laid out at; it only applies to lazy images, and otherwise, or in
+// browsers without it, the next value, 100vw (the viewport's width). src is the largest, for browsers without
 // srcset.
 function sizedSources(sources: Source[]) {
     const widths = sources
@@ -316,7 +411,9 @@ const fill = {
 function Picture({
     src,
     srcSet,
-    lazy,
+    sizes,
+    loading,
+    priority,
     fit,
     position,
     filter,
@@ -327,8 +424,11 @@ function Picture({
 }: {
     src: string
     srcSet?: string
-    // Several sizes load lazily, for sizes="auto" (see sizedSources).
-    lazy?: boolean
+    // The props (see sizedSources for sizes).
+    sizes?: string
+    loading?: 'lazy' | 'eager'
+    // source.priority, as the <img>'s fetchpriority.
+    priority?: Priority
     fit: ObjectFit
     // objectPosition, as CSS.
     position: string
@@ -399,8 +499,12 @@ function Picture({
             ref={image}
             src={src}
             srcSet={srcSet}
-            sizes={srcSet ? 'auto, 100vw' : undefined}
-            loading={lazy ? 'lazy' : undefined}
+            sizes={srcSet ? (sizes ?? 'auto, 100vw') : undefined}
+            loading={loading === 'eager' ? undefined : 'lazy'}
+            // For 'high' and 'low' (the browser's own for 'normal').
+            fetchPriority={
+                priority === 'high' || priority === 'low' ? priority : undefined
+            }
             alt={alt}
             draggable={false}
             style={{
@@ -439,6 +543,35 @@ function TintFilter({ id, color }: { id: string; color: unknown }) {
     )
 }
 
+// A source's blurDataUri, a few pixels, blurred as it's scaled up: by about
+// half a pixel of an 8 px image, in units of its size, so the same filter
+// works for any view, also rendered on a server (no layout needed). The blur
+// fades the edges, which the alpha table restores (transparent areas stay
+// transparent): Chrome ignores edgeMode, and forcing alpha to 1 would fill
+// a transparent image's background.
+function PreviewBlur({ id }: { id: string }) {
+    return (
+        <svg style={tintStyle}>
+            <defs>
+                <filter
+                    id={id}
+                    x="0"
+                    y="0"
+                    width="1"
+                    height="1"
+                    primitiveUnits="objectBoundingBox"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feGaussianBlur stdDeviation="0.06" />
+                    <feComponentTransfer>
+                        <feFuncA type="table" tableValues="0 1 1 1 1" />
+                    </feComponentTransfer>
+                </filter>
+            </defs>
+        </svg>
+    )
+}
+
 const tintStyle = {
     position: 'absolute',
     width: 0,