@thomas.f/prnext 0.1.0-alpha.1

package/compat/font-local.cjs

@@ -0,0 +1,5 @@
+'use strict';
+module.exports = function localFont() {
+  throw new Error('prnext/font/local must be compiled by PRNext. Call the font loader in a module-level const with literal options.');
+};
+module.exports.default = module.exports;

package/compat/font-local.d.cts

@@ -0,0 +1,3 @@
+import type { LocalFontOptions, NextFont, NextFontWithVariable } from './font-types.d.cts';
+declare function localFont<T extends string | undefined = undefined>(options: LocalFontOptions<T>): T extends string ? NextFontWithVariable : NextFont;
+export = localFont;

package/compat/font-types.d.cts

@@ -0,0 +1,25 @@
+export interface NextFont {
+  className: string;
+  style: { fontFamily: string; fontWeight?: number; fontStyle?: string };
+}
+export interface NextFontWithVariable extends NextFont { variable: string }
+export interface FontOptions<T extends string | undefined = undefined> {
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+  preload?: boolean;
+  fallback?: string[];
+  variable?: T;
+}
+export interface LocalFontOptions<T extends string | undefined = undefined> extends FontOptions<T> {
+  src: string | Array<{ path: string; weight?: string; style?: string }>;
+  weight?: string;
+  style?: string;
+  adjustFontFallback?: 'Arial' | 'Times New Roman' | false;
+  declarations?: Array<{ prop: string; value: string }>;
+}
+export interface GoogleFontOptions<T extends string | undefined = undefined> extends FontOptions<T> {
+  weight?: string | string[];
+  style?: string | string[];
+  subsets?: string[];
+  axes?: string[];
+  adjustFontFallback?: boolean;
+}

package/compat/head.cjs

@@ -0,0 +1,180 @@
+'use strict';
+const React = require('react');
+const HeadContext = React.createContext(null);
+
+function flatten(children, result = []) {
+  React.Children.forEach(children, child => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === React.Fragment) flatten(child.props.children, result);
+    else if (typeof child.type === 'string') result.push(child);
+  });
+  return result;
+}
+
+function headKey(element) {
+  if (element.type === 'title' || element.type === 'base') return element.type;
+  if (element.key && !String(element.key).startsWith('.')) return `key:${element.key}`;
+  if (element.type === 'meta') {
+    for (const key of ['charSet', 'name', 'httpEquiv', 'property', 'itemProp']) {
+      if (element.props[key] !== undefined) return key === 'charSet' ? 'meta:charSet' : `meta:${key}:${element.props[key]}`;
+    }
+  }
+  return null;
+}
+
+function dedupeHead(elements) {
+  const keys = new Set();
+  const tags = new Set();
+  const categories = new Map();
+  return elements.slice().reverse().filter(element => {
+    if (!React.isValidElement(element)) return false;
+    let key = element.key;
+    if (typeof key === 'string' && key.startsWith('.')) key = key.includes('$') ? key.slice(key.indexOf('$') + 1) : null;
+    const hasKey = key != null;
+    let unique = true;
+    if (hasKey) {
+      if (keys.has(key)) unique = false;
+      else keys.add(key);
+    }
+    if (element.type === 'title' || element.type === 'base') {
+      if (tags.has(element.type)) unique = false;
+      else tags.add(element.type);
+    } else if (element.type === 'meta') {
+      // Next treats explicit keys and metadata categories independently. In
+      // particular, a keyed viewport replaces the unkeyed default, while
+      // distinct keyed name tags and repeated Open Graph properties survive.
+      for (const name of ['name', 'httpEquiv', 'charSet', 'itemProp']) {
+        if (!Object.hasOwn(element.props, name)) continue;
+        const value = name === 'charSet' ? '' : element.props[name];
+        let seen = categories.get(name);
+        if (!seen) categories.set(name, seen = new Set());
+        if ((name !== 'name' || !hasKey) && seen.has(value)) unique = false;
+        else seen.add(value);
+      }
+    }
+    return unique;
+  }).reverse();
+}
+
+function defaultHead() {
+  return [React.createElement('meta', { charSet: 'utf-8' }),
+    React.createElement('meta', { name: 'viewport', content: 'width=device-width' })];
+}
+
+function executableScript(node) {
+  return node.tagName === 'SCRIPT' && node.getAttribute('type')?.toLowerCase() !== 'application/ld+json';
+}
+
+function headNode(element) {
+  const jsonLd = element.type === 'script' && String(element.props.type).toLowerCase() === 'application/ld+json';
+  if (element.type === 'script' && !jsonLd) {
+    console.warn('PRNext Head does not apply executable script updates in the browser. Server-rendered scripts are preserved.');
+    return null;
+  }
+  if (!jsonLd && !['title', 'meta', 'link', 'base', 'style'].includes(element.type)) return null;
+  const node = document.createElement(element.type);
+  for (const [key, value] of Object.entries(element.props)) {
+    if (['children', 'dangerouslySetInnerHTML'].includes(key) || key.startsWith('on') || value == null || value === false) continue;
+    const attribute = ({ charSet: 'charset', httpEquiv: 'http-equiv', className: 'class', crossOrigin: 'crossorigin' })[key] || key;
+    node.setAttribute(attribute, value === true ? '' : String(value));
+  }
+  if (typeof element.props.children === 'string' || typeof element.props.children === 'number') node.textContent = String(element.props.children);
+  else if ((element.type === 'style' || jsonLd) && element.props.dangerouslySetInnerHTML?.__html !== undefined) node.textContent = element.props.dangerouslySetInnerHTML.__html;
+  node.setAttribute('data-prnext-head', '');
+  return node;
+}
+
+function pageHeadManager() {
+  const mounted = new Map();
+  let anchor;
+  let active = true;
+  function reconcile() {
+    if (!active) return;
+    const existing = [...document.head.querySelectorAll('[data-prnext-head]')].filter(node => !executableScript(node));
+    if (!anchor) {
+      anchor = document.createComment('prnext-head');
+      document.head.insertBefore(anchor, existing[0] || document.head.firstChild);
+    }
+    const entries = dedupeHead([...defaultHead(), ...[...mounted.values()].flat()]);
+    const wanted = entries.map(headNode).filter(Boolean).map(node => {
+      const index = existing.findIndex(old => old.isEqualNode(node));
+      return index < 0 ? node : existing.splice(index, 1)[0];
+    });
+    for (const node of existing) node.remove();
+    // Keep managed page tags before the Document's unmanaged children. Moving
+    // them to the end changes which of two title tags the browser observes.
+    let cursor = anchor;
+    for (let index = wanted.length - 1; index >= 0; index--) {
+      const node = wanted[index];
+      if (node.nextSibling !== cursor) document.head.insertBefore(node, cursor);
+      cursor = node;
+    }
+  }
+  return {
+    set(owner, entries) { mounted.set(owner, entries); reconcile(); },
+    delete(owner) { mounted.delete(owner); reconcile(); },
+    activate() { active = true; reconcile(); },
+    dispose() { active = false; mounted.clear(); anchor?.remove(); anchor = undefined; },
+  };
+}
+
+function HeadProvider({ collector, restoreDefaults = false, children }) {
+  const owned = React.useRef([]);
+  const manager = React.useRef(null);
+  if (restoreDefaults && !manager.current) manager.current = pageHeadManager();
+  const value = React.useMemo(() => ({ collector: collector || owned.current, manager: restoreDefaults ? manager.current : null }), [collector, restoreDefaults]);
+  React.useEffect(() => {
+    if (!restoreDefaults) return;
+    manager.current.activate();
+    return () => manager.current.dispose();
+  }, [restoreDefaults]);
+  return React.createElement(HeadContext.Provider, { value }, children);
+}
+
+function Head({ children }) {
+  const value = React.useContext(HeadContext);
+  const collector = Array.isArray(value) ? value : value?.collector;
+  const manager = value?.manager;
+  const owner = React.useId();
+  const entries = flatten(children).map(element => React.cloneElement(element, { 'data-prnext-head-owner': owner }));
+  if (typeof document === 'undefined') {
+    if (!collector) throw new Error('Head must be used inside the PRNext head provider');
+    collector.push(...entries);
+  }
+  React.useEffect(() => {
+    if (manager) {
+      manager.set(owner, entries);
+      return () => manager.delete(owner);
+    }
+    // Hydration starts with the server head. Apply component updates without executing scripts.
+    const installed = [];
+    for (const existing of document.head.querySelectorAll('[data-prnext-head-owner]')) {
+      if (existing.getAttribute('data-prnext-head-owner') !== owner) continue;
+      // Executable scripts emitted by SSR already ran. Leave them in place;
+      // reinserting them during hydration would run application code twice.
+      if (executableScript(existing)) continue;
+      existing.remove();
+    }
+    for (const element of dedupeHead(entries)) {
+      const node = headNode(element);
+      if (!node) continue;
+      const identity = headKey(element);
+      if (identity) {
+        for (const existing of document.head.querySelectorAll('[data-prnext-head]')) {
+          if (element.type === 'title' && existing.tagName === 'TITLE') existing.remove();
+          else if (element.type === 'meta' && existing.tagName === 'META' && ['name', 'property', 'http-equiv', 'charset', 'itemprop'].some(attribute => node.hasAttribute(attribute) && existing.getAttribute(attribute) === node.getAttribute(attribute))) existing.remove();
+        }
+      }
+      document.head.appendChild(node);
+      installed.push(node);
+    }
+    return () => { for (const node of installed) node.remove(); };
+  }, [children, owner, manager]);
+  return null;
+}
+
+module.exports = Head;
+module.exports.default = Head;
+module.exports.HeadProvider = HeadProvider;
+module.exports.HeadContext = HeadContext;
+module.exports.dedupeHead = dedupeHead;

package/compat/head.d.cts

@@ -0,0 +1,3 @@
+import type { ReactNode, ReactElement } from 'react';
+export default function Head(props: { children?: ReactNode }): null;
+export function HeadProvider(props: { collector?: ReactElement[]; restoreDefaults?: boolean; children?: ReactNode }): ReactElement;

package/compat/headers.cjs

@@ -0,0 +1,89 @@
+'use strict';
+const {sampleMethods} = require('./instant-samples.cjs');
+const { AsyncLocalStorage } = require('node:async_hooks');
+const { CookieStore, parseCookieHeader, serializeCookie } = require('./cookies.cjs');
+const { createCacheState, inCacheScope, currentCacheScope } = require('./data-cache.cjs');
+const { createStaticState, dynamicUsage, forceStaticRender } = require('./static-generation.cjs');
+const { isDraftRequest, draftCookie } = require('./draft.cjs');
+const { readPreviewData } = require('./preview.cjs');
+const { staticBailout } = require('./static-generation.cjs');
+
+const requestStorage = new AsyncLocalStorage();
+function currentRequest() {
+  const context = requestStorage.getStore();
+  if (!context) throw new Error('Request APIs can only be used while handling a PRNext request');
+  return context;
+}
+function runWithoutRequestContext(callback) { return requestStorage.exit(callback); }
+
+function readonlyHeaders(values) {
+  const headers = new Headers(values);
+  const proxy = new Proxy(headers, { get(target, property) {
+    if (['set', 'append', 'delete'].includes(property)) return () => { throw new Error('headers() is read-only'); };
+    if (property === 'forEach') return (callback, thisArg) => target.forEach((value, name) => callback.call(thisArg, value, name, proxy));
+    const value = Reflect.get(target, property, target);
+    return typeof value === 'function' ? value.bind(target) : value;
+  } });
+  return proxy;
+}
+
+function runRequestContext(input, callback) {
+  const lazy = input.phase === 'pages' && (!input.headers || [Object.prototype, null].includes(Object.getPrototypeOf(input.headers)));
+  // Snapshot values now, preserving readonly request semantics even when the
+  // caller subsequently mutates its input. Pages APIs normally never need the
+  // Web Headers/CookieStore objects, so construct those only on actual access.
+  const raw = lazy ? Object.create(null) : undefined;
+  if (lazy && !forceStaticRender(input)) for (const name of Object.keys(input.headers || {})) raw[name] = String(input.headers[name]);
+  let headers = lazy ? undefined : readonlyHeaders(forceStaticRender(input) ? {} : input.headers || {});
+  const getHeaders = () => headers ??= readonlyHeaders(raw);
+  const outgoingCookies = new Map();
+  const mutableCookies = Boolean(input.mutableCookies) && !forceStaticRender(input);
+  const makeCookies = () => new CookieStore(getHeaders().get('cookie') || '', {
+    mutable: mutableCookies,
+    onChange(cookie) { outgoingCookies.set(cookie.name, serializeCookie(cookie)); },
+  });
+  let cookies = lazy ? undefined : makeCookies();
+  const getCookies = () => cookies ??= makeCookies();
+  // Next merges this trusted middleware response marker only into App render
+  // and action cookies. Request headers, Route Handlers and Pages APIs retain
+  // their original Cookie header. Native ingress strips spoofed markers.
+  if (['render', 'action'].includes(input.phase) && !forceStaticRender(input)) {
+    const marker = headers.get('x-middleware-set-cookie');
+    for (const line of marker?.split(/,(?=\s*[^;,=\s]+\s*=)/) || []) {
+      for (const [name, cookie] of parseCookieHeader(line.split(';', 1)[0])) cookies._cookies.set(name, cookie);
+    }
+  }
+  const context = { ...input, previewData: readPreviewData(input), draftMode: isDraftRequest(input), basePath: input.basePath ?? input.manifest?.config?.basePath ?? '', cacheState: input.cacheState || createCacheState(),
+    staticState: input.staticState || (input.staticGeneration ? createStaticState(input.staticGeneration, input.cacheConfig) : undefined),
+    headers, cookies, outgoingCookies };
+  if (lazy) Object.defineProperties(context, {
+    headers: { enumerable: true, configurable: true, get: getHeaders, set(value) { headers = value; } },
+    cookies: { enumerable: true, configurable: true, get: getCookies, set(value) { cookies = value; } },
+  });
+  return requestStorage.run(context, callback);
+}
+
+function assertUncached(name) {
+  if (inCacheScope()) throw new Error(`${name}() cannot be accessed inside unstable_cache; read it outside and pass the required values as arguments`);
+}
+async function headers() { if (currentRequest().instantValidation && currentRequest().instantSample) { assertUncached('headers'); return sampleMethods(currentRequest(), 'headers', currentRequest().headers); } if (currentCacheScope()?.kind !== 'private') assertUncached('headers'); dynamicUsage('headers()'); return currentRequest().headers; }
+async function cookies() { if (currentRequest().instantValidation && currentRequest().instantSample) { assertUncached('cookies'); return sampleMethods(currentRequest(), 'cookies', currentRequest().cookies); } if (currentCacheScope()?.kind !== 'private') assertUncached('cookies'); dynamicUsage('cookies()'); return currentRequest().cookies; }
+async function draftMode() {
+  const context = currentRequest();
+  if (!context.draftProvider) context.draftProvider = {
+    get isEnabled() { return context.draftMode; },
+    enable() { change(true); },
+    disable() { change(false); },
+  };
+  function change(enabled) {
+    assertUncached('draftMode().enable()/disable()');
+    if (context.staticState) staticBailout('draftMode().enable()/disable()', context);
+    // CookieStore rejects render-phase writes and writes after headers commit.
+    context.cookies.set(draftCookie(context, enabled));
+    context.draftMode = enabled;
+    context.draftChanged = true;
+  }
+  return context.draftProvider;
+}
+
+module.exports = { headers, cookies, draftMode, runRequestContext, currentRequest, runWithoutRequestContext };

package/compat/headers.d.cts

@@ -0,0 +1,26 @@
+export interface CookieOptions {
+  path?: string;
+  domain?: string;
+  expires?: Date | number;
+  maxAge?: number;
+  httpOnly?: boolean;
+  secure?: boolean;
+  sameSite?: boolean | 'lax' | 'strict' | 'none';
+  priority?: 'low' | 'medium' | 'high';
+  partitioned?: boolean;
+}
+export interface Cookie extends CookieOptions { name: string; value: string }
+export interface CookieStore extends Iterable<[string, Cookie]> {
+  readonly size: number;
+  get(name: string | { name: string }): Cookie | undefined;
+  getAll(name?: string | { name: string }): Cookie[];
+  has(name: string): boolean;
+  set(name: string, value: string, options?: CookieOptions): CookieStore;
+  set(cookie: Cookie): CookieStore;
+  delete(name: string | { name: string; path?: string; domain?: string }): CookieStore;
+  toString(): string;
+}
+export function headers(): Promise<Omit<Headers, 'set' | 'append' | 'delete'>>;
+export function cookies(): Promise<CookieStore>;
+export interface DraftMode { readonly isEnabled: boolean; enable(): void; disable(): void }
+export function draftMode(): Promise<DraftMode>;

package/compat/image-config.cjs

@@ -0,0 +1,3 @@
+'use strict';
+// The compiler replaces this module per build; importing PRNext itself remains usable.
+module.exports = { deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[32,48,64,96,128,256,384],path:'/_prnext/image',qualities:[75],remotePatterns:[],domains:[],unoptimized:false,loader:'default' };

package/compat/image-imports.d.ts

@@ -0,0 +1,12 @@
+// Static imports emitted by the PRNext image compiler.
+declare module '*.png' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.jpg' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.jpeg' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.gif' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.webp' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.avif' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.ico' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.bmp' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.tiff' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.tif' { const image: import('./image.cjs').StaticImageData; export default image; }
+declare module '*.svg' { const image: import('./image.cjs').StaticImageData; export default image; }

package/compat/image-shared.cjs

@@ -0,0 +1,62 @@
+'use strict';
+const config = require('./image-config.cjs');
+const allSizes = [...new Set([...config.deviceSizes, ...config.imageSizes])].sort((a,b) => a-b);
+function widths(width, sizes) {
+  if (sizes) {
+    const percent = [...sizes.matchAll(/(^|\s)(1?\d?\d)vw/g)].map(match => Number(match[2]));
+    return { values: percent.length ? allSizes.filter(size => size >= config.deviceSizes[0] * Math.min(...percent) / 100) : allSizes, kind: 'w' };
+  }
+  if (!width) return { values: config.deviceSizes, kind: 'w' };
+  return { values: [...new Set([width, width * 2].map(size => allSizes.find(value => value >= size) || allSizes.at(-1)))], kind: 'x' };
+}
+function defaultLoader({ src, width, quality }) {
+  if (config.loader === 'custom') throw new Error(`Image with src "${src}" requires a loader prop or images.loaderFile`);
+  const qualities = config.qualities || [75];
+  quality = qualities.reduce((best, value) => Math.abs(value - (quality || 75)) < Math.abs(best - (quality || 75)) ? value : best);
+  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
+}
+function integer(value) { return typeof value === 'number' ? value : typeof value === 'string' && /^\d+$/.test(value) ? Number(value) : undefined; }
+function imageProps(input) {
+  const { src, alt, width, height, fill = false, priority, preload, quality, loader: inputLoader, unoptimized: rawUnoptimized, placeholder = 'empty', blurDataURL: inputBlur,
+    blurWidth: _blurWidth, blurHeight: _blurHeight, onLoadingComplete, onLoad, onError, style, sizes: inputSizes, overrideSrc, layout, objectFit, objectPosition, lazyBoundary: _lazyBoundary, lazyRoot: _lazyRoot, ...rest } = input;
+  const source = typeof src === 'object' && src !== null ? src.default || src : { src };
+  if (!source || typeof source.src !== 'string') throw new Error('Image src must be a URL string or a static image import');
+  let w = integer(width), h = integer(height);
+  const isFill = fill || layout === 'fill';
+  if (!isFill && source.width && source.height) {
+    if (!w && !h) { w = source.width; h = source.height; }
+    else if (w && !h) h = Math.round(source.height * w / source.width);
+    else if (h && !w) w = Math.round(source.width * h / source.height);
+  }
+  if (!isFill && (!w || !h || w < 0 || h < 0)) throw new Error(`Image with src "${source.src}" requires positive width and height, or fill`);
+  const unoptimized = rawUnoptimized || config.unoptimized || /^(?:data:|blob:)/.test(source.src) || (!config.dangerouslyAllowSVG && source.src.split('?')[0].endsWith('.svg'));
+  const sizes = inputSizes || (isFill || layout === 'responsive' ? '100vw' : undefined);
+  const loader = inputLoader || config.customLoader || defaultLoader;
+  const qualityNumber = integer(quality);
+  const candidates = widths(w, sizes);
+  const attributes = unoptimized ? { src: source.src } : {
+    sizes: sizes || (candidates.kind === 'w' ? '100vw' : undefined),
+    srcSet: candidates.values.map((value, index) => `${loader({ src: source.src, width: value, quality: qualityNumber })} ${candidates.kind === 'w' ? value : index + 1}${candidates.kind}`).join(', '),
+    src: loader({ src: source.src, width: candidates.values.at(-1), quality: qualityNumber }),
+  };
+  const blurDataURL = inputBlur || source.blurDataURL;
+  if (placeholder === 'blur' && !blurDataURL) throw new Error(`Image with src "${source.src}" uses placeholder="blur" without blurDataURL`);
+  const baseStyle = isFill ? { position: 'absolute', height: '100%', width: '100%', left: 0, top: 0, right: 0, bottom: 0, objectFit, objectPosition } : { objectFit, objectPosition };
+  if (layout === 'responsive') Object.assign(baseStyle, { width: '100%', height: 'auto' });
+  if (layout === 'intrinsic') Object.assign(baseStyle, { maxWidth: '100%', height: 'auto' });
+  return { props: { ...rest, alt, width: isFill ? undefined : w, height: isFill ? undefined : h,
+    loading: rest.loading || (priority || preload || /^(?:data:|blob:)/.test(source.src) ? undefined : 'lazy'), decoding: rest.decoding || 'async',
+    'data-nimg': isFill ? 'fill' : '1', style: { color: 'transparent', ...baseStyle, ...style }, ...attributes, src: overrideSrc || attributes.src },
+    placeholder, blurDataURL, priority: priority || preload, onLoad, onError, onLoadingComplete };
+}
+function getImageProps(input) {
+  const result = imageProps(input);
+  if (result.placeholder !== 'empty') Object.assign(result.props.style, placeholderStyle(result));
+  return { props: Object.fromEntries(Object.entries(result.props).filter(([, value]) => value !== undefined)) };
+}
+function placeholderStyle(result) {
+  if (result.placeholder === "empty") return {};
+  const url = result.placeholder === 'blur' ? result.blurDataURL : result.placeholder;
+  return url ? { backgroundSize: result.props.style.objectFit === 'contain' ? 'contain' : 'cover', backgroundPosition: result.props.style.objectPosition || '50% 50%', backgroundRepeat: 'no-repeat', backgroundImage: `url("${url.replaceAll('"', '%22')}")` } : {};
+}
+module.exports={imageProps,getImageProps,placeholderStyle};

package/compat/image.cjs

@@ -0,0 +1,64 @@
+'use client';
+'use strict';
+const React = require('react');
+const ReactDOM = require('react-dom');
+const {imageProps,getImageProps,placeholderStyle}=require('./image-shared.cjs');
+const useBrowserLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+const Image = React.forwardRef(function Image(input, ref) {
+  const result = imageProps(input);
+  const [complete, setComplete] = React.useState(false);
+  const [failed, setFailed] = React.useState(false);
+  const internalRef = React.useRef(null);
+  const retriedRef = React.useRef(null);
+  const latest = React.useRef(result);
+  latest.current = result;
+  const loaded = React.useCallback(image => {
+    if (!image || image.naturalWidth === 0 || image.dataset.loadedSrc === image.src) return;
+    const source = image.src;
+    image.dataset.loadedSrc = image.src;
+    Promise.resolve(image.decode?.()).catch(() => {}).then(() => {
+      if (!image.isConnected || image.naturalWidth === 0 || image.src !== source) return;
+      setComplete(true);
+      const { onLoad, onLoadingComplete } = latest.current;
+      if (onLoad) {
+        const event = new Event('load');
+        Object.defineProperty(event, 'target', { value: image });
+        onLoad({ ...event, type: 'load', nativeEvent: event, currentTarget: image, target: image, persist() {}, isDefaultPrevented: () => event.defaultPrevented, isPropagationStopped: () => false, preventDefault: () => event.preventDefault(), stopPropagation: () => event.stopPropagation() });
+      }
+      onLoadingComplete?.(image);
+    });
+  }, []);
+  const attach = React.useCallback(image => {
+    internalRef.current = image;
+    const cleanup = typeof ref === 'function' ? ref(image) : undefined;
+    if (ref && typeof ref !== 'function') ref.current = image;
+    if (image?.complete) loaded(image);
+    if (image) return () => {
+      internalRef.current = null;
+      if (typeof cleanup === 'function') cleanup();
+      else if (typeof ref === 'function') ref(null);
+      else if (ref) ref.current = null;
+    };
+  }, [ref, loaded]);
+  useBrowserLayoutEffect(() => {
+    const image = internalRef.current;
+    if (!image?.complete || image.naturalWidth !== 0 || !image.getAttribute('src')) return;
+    // Native error events that precede hydration are not replayed by React.
+    // Retry after handlers are attached so onError receives a real image event.
+    if (latest.current.onError && retriedRef.current !== image) {
+      retriedRef.current = image;
+      image.src = image.src;
+    } else {
+      setComplete(true);
+      setFailed(true);
+    }
+  }, []);
+  if (result.priority && ReactDOM.preload) ReactDOM.preload(result.props.src, { as: 'image', imageSrcSet: result.props.srcSet, imageSizes: result.props.sizes, crossOrigin: result.props.crossOrigin, referrerPolicy: result.props.referrerPolicy, fetchPriority: result.props.fetchPriority });
+  return React.createElement('img', { ...result.props,
+    style: { ...result.props.style, ...(complete ? {} : placeholderStyle(result)), ...(failed ? { color: undefined } : {}) }, ref: attach,
+    onLoad: event => loaded(event.currentTarget), onError: event => { setComplete(true); setFailed(true); result.onError?.(event); },
+  });
+});
+module.exports = Image;
+module.exports.default = Image;
+module.exports.getImageProps = getImageProps;

package/compat/image.d.cts

@@ -0,0 +1,35 @@
+/// <reference path="./image-imports.d.ts" />
+import type { ImgHTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ImageLoaderProps { src: string; width: number; quality?: number }
+export type ImageLoader = (props: ImageLoaderProps) => string;
+export interface RemotePattern { protocol?: 'http' | 'https'; hostname: string; port?: string; pathname?: string; search?: string }
+export interface LocalPattern { pathname?: string; search?: string }
+export interface ImageConfig {
+  deviceSizes?: number[]; imageSizes?: number[]; qualities?: number[];
+  loader?: 'default' | 'custom'; loaderFile?: string; path?: string;
+  domains?: string[]; remotePatterns?: Array<RemotePattern | URL>; localPatterns?: LocalPattern[];
+  formats?: Array<'image/avif' | 'image/webp'>; unoptimized?: boolean; disableStaticImages?: boolean;
+  minimumCacheTTL?: number; maximumDiskCacheSize?: number; maximumRedirects?: number; maximumResponseBody?: number;
+  dangerouslyAllowLocalIP?: boolean; dangerouslyAllowSVG?: boolean;
+  contentSecurityPolicy?: string; contentDispositionType?: 'attachment' | 'inline';
+}
+export interface StaticImageData { src: string; width: number; height: number; blurDataURL?: string; blurWidth?: number; blurHeight?: number }
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height'> {
+  src: string | StaticImageData | { default: StaticImageData };
+  alt: string;
+  width?: number | `${number}`;
+  height?: number | `${number}`;
+  fill?: boolean;
+  priority?: boolean;
+  preload?: boolean;
+  quality?: number | `${number}`;
+  overrideSrc?: string;
+  loader?: ImageLoader;
+  unoptimized?: boolean;
+  placeholder?: 'empty' | 'blur' | string;
+  blurDataURL?: string;
+  onLoadingComplete?: (image: HTMLImageElement) => void;
+}
+declare const Image: ForwardRefExoticComponent<ImageProps & RefAttributes<HTMLImageElement>>;
+export function getImageProps(props: ImageProps): { props: ImgHTMLAttributes<HTMLImageElement> };
+export default Image;