matrix-design-system 1.0.0

package/dist/atoms/effects/matrix-rain/matrix-rain/matrix-2d-canvas/use-matrix-2d-canvas-store.mjs

@@ -0,0 +1,186 @@
+"use client";
+import { debounce } from "./debounce.mjs";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/atoms/effects/matrix-rain/matrix-rain/matrix-2d-canvas/use-matrix-2d-canvas-store.ts
+const matrix = "ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ012345789Z:.=*+-<>".split("");
+const colors = [
+	{
+		threshold: .05,
+		color: "#00FF41"
+	},
+	{
+		threshold: .15,
+		color: "#39FF14"
+	},
+	{
+		threshold: .4,
+		color: "#00CC33"
+	},
+	{
+		threshold: .7,
+		color: "#003D10"
+	},
+	{
+		threshold: .9,
+		color: "#003D10"
+	},
+	{
+		threshold: Number.MAX_SAFE_INTEGER,
+		color: "#002200"
+	}
+];
+const backgroundColor = `#00110010`;
+const FRAME_RATE = 20;
+const setCanvasSize = (canvas, context) => {
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	canvas.width = rect.width * dpr;
+	canvas.height = rect.height * dpr;
+	context?.scale(dpr, dpr);
+};
+const initializeDrops = (canvas, fontSize) => {
+	const columns = Math.floor(canvas.width / window.devicePixelRatio / fontSize);
+	const drops = [];
+	for (let x = 0; x < columns; x++) drops[x] = Math.floor(Math.random() * (canvas.height / window.devicePixelRatio) / fontSize);
+	return drops;
+};
+const initialize = (canvas, context, fontSize) => {
+	setCanvasSize(canvas, context);
+	return {
+		drops: initializeDrops(canvas, fontSize),
+		height: canvas.height / window.devicePixelRatio,
+		width: canvas.width / window.devicePixelRatio,
+		lastFrameTimestamp: performance.now(),
+		timeDistanceBetweenFrames: 1e3 / FRAME_RATE,
+		font: `${fontSize}px 'Courier Prime', monospace`,
+		animationFrameId: 0
+	};
+};
+const useMatrix2dCanvasStore = (fontSize, density, paused) => {
+	const $ = c(11);
+	const [canvasEl, setCanvasEl] = useState(null);
+	const lastWidth = useRef(0);
+	const rafRef = useRef(0);
+	const startRef = useRef(_temp);
+	const stopRef = useRef(_temp2);
+	const pausedRef = useRef(paused);
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			lastWidth.current = window.innerWidth;
+		};
+		t1 = [];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[2] !== canvasEl || $[3] !== density || $[4] !== fontSize) {
+		t2 = () => {
+			const canvas = canvasEl;
+			if (!canvas) return;
+			const context = canvas.getContext("2d");
+			if (!context) return;
+			let matrixRainDrawContext = initialize(canvas, context, fontSize);
+			const drawFrame = () => {
+				context.font = matrixRainDrawContext.font;
+				context.fillStyle = backgroundColor;
+				context.fillRect(0, 0, matrixRainDrawContext.width, matrixRainDrawContext.height);
+				for (let i = 0; i < matrixRainDrawContext.drops.length; i++) {
+					const text = matrix[Math.floor(Math.random() * matrix.length)];
+					const color = colors.find(_temp3).color;
+					context.fillStyle = color;
+					const x = i * fontSize;
+					const y = matrixRainDrawContext.drops[i] * fontSize;
+					context.fillText(text, x, y);
+					if (y > matrixRainDrawContext.height && Math.random() > density) matrixRainDrawContext.drops[i] = 0;
+					matrixRainDrawContext.drops[i] = matrixRainDrawContext.drops[i] + 1;
+				}
+			};
+			const frame = (now) => {
+				if (now - matrixRainDrawContext.lastFrameTimestamp < matrixRainDrawContext.timeDistanceBetweenFrames) {
+					rafRef.current = requestAnimationFrame(frame);
+					return;
+				}
+				drawFrame();
+				matrixRainDrawContext.lastFrameTimestamp = now;
+				rafRef.current = requestAnimationFrame(frame);
+			};
+			const start = () => {
+				cancelAnimationFrame(rafRef.current);
+				rafRef.current = requestAnimationFrame(frame);
+			};
+			const stop = () => {
+				cancelAnimationFrame(rafRef.current);
+			};
+			startRef.current = start;
+			stopRef.current = stop;
+			const resize = debounce(() => {
+				if (window.innerWidth !== lastWidth.current) {
+					lastWidth.current = window.innerWidth;
+					matrixRainDrawContext = initialize(canvas, context, fontSize);
+					for (let i_0 = 0; i_0 < FRAME_RATE; i_0++) drawFrame();
+					if (!pausedRef.current) start();
+				}
+			}, 300);
+			for (let i_1 = 0; i_1 < FRAME_RATE; i_1++) drawFrame();
+			if (!pausedRef.current) start();
+			window.addEventListener("resize", resize);
+			return () => {
+				cancelAnimationFrame(rafRef.current);
+				window.removeEventListener("resize", resize);
+			};
+		};
+		t3 = [
+			canvasEl,
+			fontSize,
+			density
+		];
+		$[2] = canvasEl;
+		$[3] = density;
+		$[4] = fontSize;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[7] !== paused) {
+		t4 = () => {
+			pausedRef.current = paused;
+			if (paused) stopRef.current();
+			else startRef.current();
+		};
+		t5 = [paused];
+		$[7] = paused;
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = { effects: { setCanvasEl } };
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
+};
+function _temp() {}
+function _temp2() {}
+function _temp3(t0) {
+	const { threshold } = t0;
+	return Math.random() < threshold;
+}
+//#endregion
+export { useMatrix2dCanvasStore };

package/dist/atoms/effects/matrix-rain/matrix-rain/matrix-rain.d.mts

@@ -0,0 +1,5 @@
+import React from "react";
+//#region src/atoms/effects/matrix-rain/matrix-rain/matrix-rain.d.ts
+declare const MatrixRain: React.NamedExoticComponent<{}>;
+//#endregion
+export { MatrixRain };

package/dist/atoms/effects/matrix-rain/matrix-rain/matrix-rain.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { Matrix2DCanvas } from "./matrix-2d-canvas/matrix-2d-canvas.mjs";
+import { useMatrixRainStore } from "./use-matrix-rain-store.mjs";
+import { c } from "react/compiler-runtime";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MatrixRainWebGPU } from "matrix-rain-webgpu";
+//#region src/atoms/effects/matrix-rain/matrix-rain/matrix-rain.tsx
+const backgroundColor = `#00110010`;
+const MatrixRainRenderer = () => {
+	const $ = c(16);
+	const { state, effects } = useMatrixRainStore();
+	const { paused, webGpuSupported, webGpuFailed, settings, rain, bloom, crt } = state;
+	const { setContainerEl, onWebGpuError } = effects;
+	const showWebGpu = webGpuSupported === true && !webGpuFailed;
+	const showFallback = webGpuSupported === false || webGpuFailed;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { backgroundColor };
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== bloom || $[2] !== crt || $[3] !== onWebGpuError || $[4] !== paused || $[5] !== rain || $[6] !== showWebGpu) {
+		t1 = showWebGpu && /* @__PURE__ */ jsx(MatrixRainWebGPU, {
+			paused,
+			rain,
+			bloom,
+			crt,
+			onError: onWebGpuError
+		});
+		$[1] = bloom;
+		$[2] = crt;
+		$[3] = onWebGpuError;
+		$[4] = paused;
+		$[5] = rain;
+		$[6] = showWebGpu;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== paused || $[9] !== settings || $[10] !== showFallback) {
+		t2 = showFallback && /* @__PURE__ */ jsx(Matrix2DCanvas, {
+			fontSize: settings.rain.fontSize,
+			density: settings.rain.density,
+			paused
+		});
+		$[8] = paused;
+		$[9] = settings;
+		$[10] = showFallback;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== setContainerEl || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			ref: setContainerEl,
+			className: "pointer-events-none absolute top-0 left-0 h-full w-full",
+			style: t0,
+			children: [t1, t2]
+		});
+		$[12] = setContainerEl;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+};
+const MatrixRain = memo(MatrixRainRenderer);
+//#endregion
+export { MatrixRain };

package/dist/atoms/effects/matrix-rain/matrix-rain/use-matrix-rain-activity.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { useReducedMotions } from "../../../../hooks/use-reduced-motions.mjs";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+//#region src/atoms/effects/matrix-rain/matrix-rain/use-matrix-rain-activity.ts
+function useMatrixRainActivity(element) {
+	const $ = c(3);
+	const reducedMotion = useReducedMotions();
+	const [onScreen, setOnScreen] = useState(true);
+	let t0;
+	let t1;
+	if ($[0] !== element) {
+		t0 = () => {
+			if (!element) return;
+			const observer = new window.IntersectionObserver((t2) => {
+				const [entry] = t2;
+				setOnScreen(entry.isIntersecting || entry.intersectionRect.height > 0);
+			}, {
+				root: null,
+				rootMargin: "-50px 0px -50px 0px",
+				threshold: 0
+			});
+			observer.observe(element);
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t1 = [element];
+		$[0] = element;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	return reducedMotion || !onScreen;
+}
+//#endregion
+export { useMatrixRainActivity };

package/dist/atoms/effects/matrix-rain/matrix-rain/use-matrix-rain-store.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { useMatrixRainActivity } from "./use-matrix-rain-activity.mjs";
+import { useWebGpuSupported } from "../../../../hooks/use-webgpu-supported.mjs";
+import { settingsToProps } from "../../../../state/matrix-rain/matrix-settings.mjs";
+import { useMatrixSettingsStore } from "../../../../hooks/use-matrix-settings-store.mjs";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+//#region src/atoms/effects/matrix-rain/matrix-rain/use-matrix-rain-store.ts
+const useMatrixRainStore = () => {
+	const $ = c(14);
+	const [containerEl, setContainerEl] = useState(null);
+	const [webGpuFailed, setWebGpuFailed] = useState(false);
+	const webGpuSupported = useWebGpuSupported();
+	const settings = useMatrixSettingsStore();
+	let t0;
+	if ($[0] !== settings) {
+		t0 = settingsToProps(settings);
+		$[0] = settings;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { rain, bloom, crt } = t0;
+	const paused = useMatrixRainActivity(containerEl);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setWebGpuFailed(true);
+		$[2] = t1;
+	} else t1 = $[2];
+	const onWebGpuError = t1;
+	let t2;
+	if ($[3] !== bloom || $[4] !== crt || $[5] !== paused || $[6] !== rain || $[7] !== settings || $[8] !== webGpuFailed || $[9] !== webGpuSupported) {
+		t2 = {
+			paused,
+			webGpuSupported,
+			webGpuFailed,
+			settings,
+			rain,
+			bloom,
+			crt
+		};
+		$[3] = bloom;
+		$[4] = crt;
+		$[5] = paused;
+		$[6] = rain;
+		$[7] = settings;
+		$[8] = webGpuFailed;
+		$[9] = webGpuSupported;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			setContainerEl,
+			onWebGpuError
+		};
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t2) {
+		t4 = {
+			state: t2,
+			effects: t3
+		};
+		$[12] = t2;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+};
+//#endregion
+export { useMatrixRainStore };

package/dist/atoms/effects/overlay/index.d.mts

@@ -0,0 +1,2 @@
+import { Overlay, OverlayProps } from "./overlay.mjs";
+export { Overlay, type OverlayProps };

package/dist/atoms/effects/overlay/overlay.d.mts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from "react";
+//#region src/atoms/effects/overlay/overlay.d.ts
+interface OverlayProps {
+  delay: number;
+  onClick?: () => void;
+  children?: ReactNode;
+  className?: string;
+}
+declare const Overlay: FC<OverlayProps>;
+//#endregion
+export { Overlay, OverlayProps };

package/dist/atoms/effects/overlay/overlay.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { useOverlayStore } from "./use-overlay-store.mjs";
+import { c } from "react/compiler-runtime";
+import { motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/effects/overlay/overlay.tsx
+const Overlay = (t0) => {
+	const $ = c(10);
+	const { onClick, delay: t1, children, className: t2 } = t0;
+	const delay = t1 === void 0 ? 0 : t1;
+	const className = t2 === void 0 ? "" : t2;
+	useOverlayStore();
+	const t3 = `fixed top-0 left-0 w-full h-full bg-black-alpha-75 backdrop-blur-sm z-40 ${className}`;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { opacity: 0 };
+		t5 = { opacity: 1 };
+		t6 = { opacity: 0 };
+		$[0] = t4;
+		$[1] = t5;
+		$[2] = t6;
+	} else {
+		t4 = $[0];
+		t5 = $[1];
+		t6 = $[2];
+	}
+	let t7;
+	if ($[3] !== delay) {
+		t7 = {
+			type: "spring",
+			stiffness: 400,
+			damping: 30,
+			duration: .25,
+			delay
+		};
+		$[3] = delay;
+		$[4] = t7;
+	} else t7 = $[4];
+	let t8;
+	if ($[5] !== children || $[6] !== onClick || $[7] !== t3 || $[8] !== t7) {
+		t8 = /* @__PURE__ */ jsx(motion.div, {
+			className: t3,
+			onClick,
+			initial: t4,
+			animate: t5,
+			exit: t6,
+			transition: t7,
+			children
+		});
+		$[5] = children;
+		$[6] = onClick;
+		$[7] = t3;
+		$[8] = t7;
+		$[9] = t8;
+	} else t8 = $[9];
+	return t8;
+};
+//#endregion
+export { Overlay };

package/dist/atoms/effects/overlay/use-overlay-store.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { useLockBodyScroll } from "../../../hooks/use-lock-body-scroll.mjs";
+//#region src/atoms/effects/overlay/use-overlay-store.ts
+const useOverlayStore = () => {
+	useLockBodyScroll();
+};
+//#endregion
+export { useOverlayStore };

package/dist/atoms/effects/pills/index.d.mts

@@ -0,0 +1,2 @@
+import { BluePill, RedPill, RedPillNoReflection } from "./pills.mjs";
+export { BluePill, RedPill, RedPillNoReflection };

package/dist/atoms/effects/pills/pills.d.mts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/atoms/effects/pills/pills.d.ts
+declare const RedPillNoReflection: FC<PropsWithChildren<{
+  pillBodyClassName?: string;
+  pillLabelClassName?: string;
+}>>;
+declare const RedPill: FC<PropsWithChildren>;
+declare const BluePill: FC<PropsWithChildren>;
+//#endregion
+export { BluePill, RedPill, RedPillNoReflection };

package/dist/atoms/effects/pills/pills.mjs

@@ -0,0 +1,121 @@
+"use client";
+import { usePillsStore } from "./use-pills-store.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/atoms/effects/pills/pills.tsx
+const PillsRoot = (t0) => {
+	const $ = c(16);
+	const { variant, children, pillBodyClassName, pillLabelClassName } = t0;
+	const { state } = usePillsStore();
+	const { shouldReduceMotion } = state;
+	if (variant === "red-no-reflection") {
+		const t1 = `pill pill-red ${shouldReduceMotion ? "pill-red-glass-lite" : "pill-red-glass"} pill-no-reflection ${pillBodyClassName}`;
+		const t2 = `pill-label ${pillLabelClassName}`;
+		let t3;
+		if ($[0] !== children || $[1] !== t2) {
+			t3 = /* @__PURE__ */ jsx("span", {
+				className: t2,
+				children
+			});
+			$[0] = children;
+			$[1] = t2;
+			$[2] = t3;
+		} else t3 = $[2];
+		let t4;
+		if ($[3] !== t1 || $[4] !== t3) {
+			t4 = /* @__PURE__ */ jsx("div", {
+				className: t1,
+				children: t3
+			});
+			$[3] = t1;
+			$[4] = t3;
+			$[5] = t4;
+		} else t4 = $[5];
+		return t4;
+	}
+	if (variant === "red") {
+		const t1 = `pill pill-red ${shouldReduceMotion ? "pill-red-glass-lite" : "pill-red-glass"}`;
+		let t2;
+		if ($[6] !== children) {
+			t2 = /* @__PURE__ */ jsx("span", {
+				className: "pill-label",
+				children
+			});
+			$[6] = children;
+			$[7] = t2;
+		} else t2 = $[7];
+		let t3;
+		if ($[8] !== t1 || $[9] !== t2) {
+			t3 = /* @__PURE__ */ jsx("div", {
+				className: t1,
+				children: t2
+			});
+			$[8] = t1;
+			$[9] = t2;
+			$[10] = t3;
+		} else t3 = $[10];
+		return t3;
+	}
+	const t1 = `pill pill-blue ${shouldReduceMotion ? "pill-blue-glass-lite" : "pill-blue-glass"}`;
+	let t2;
+	if ($[11] !== children) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: "pill-label",
+			children
+		});
+		$[11] = children;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+};
+const RedPillNoReflection = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PillsRoot, {
+			variant: "red-no-reflection",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+const RedPill = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PillsRoot, {
+			variant: "red",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+const BluePill = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PillsRoot, {
+			variant: "blue",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+//#endregion
+export { BluePill, RedPill, RedPillNoReflection };

package/dist/atoms/effects/pills/use-pills-store.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useReducedMotions } from "../../../hooks/use-reduced-motions.mjs";
+import { c } from "react/compiler-runtime";
+//#region src/atoms/effects/pills/use-pills-store.ts
+const usePillsStore = () => {
+	const $ = c(2);
+	const shouldReduceMotion = useReducedMotions();
+	let t0;
+	if ($[0] !== shouldReduceMotion) {
+		t0 = { state: { shouldReduceMotion } };
+		$[0] = shouldReduceMotion;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+//#endregion
+export { usePillsStore };

package/dist/atoms/effects/plain-image/index.d.mts

@@ -0,0 +1,2 @@
+import { ImageComponent, ImageComponentProps, ImagePlaceholder, ImageSource, PlainImage } from "./plain-image.mjs";
+export { type ImageComponent, type ImageComponentProps, type ImagePlaceholder, type ImageSource, PlainImage };

package/dist/atoms/effects/plain-image/plain-image.d.mts

@@ -0,0 +1,45 @@
+import { CSSProperties, FC, ImgHTMLAttributes, ReactEventHandler } from "react";
+//#region src/atoms/effects/plain-image/plain-image.d.ts
+type ImagePlaceholder = "blur" | "empty" | `data:image/${string}`;
+/**
+ * A plain URL, or the object shape every bundler's static image import produces (Next, Vite and
+ * webpack all emit at least `src`). Accepting both keeps the design system usable with or without a
+ * build step that understands image imports.
+ */
+type ImageSource = string | {
+  src: string;
+  width: number;
+  height: number;
+  blurDataURL?: string;
+};
+interface ImageComponentProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "placeholder" | "width" | "height" | "loading"> {
+  src: ImageSource;
+  alt: string;
+  width?: number | `${number}`;
+  height?: number | `${number}`;
+  /** Absolutely fill the nearest positioned ancestor, as `next/image` does. */
+  fill?: boolean;
+  sizes?: string;
+  priority?: boolean;
+  quality?: number;
+  loading?: "eager" | "lazy";
+  placeholder?: ImagePlaceholder;
+  blurDataURL?: string;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: ReactEventHandler<HTMLImageElement>;
+}
+/**
+ * What the design system needs from an image renderer. Consumers inject an optimising implementation
+ * (`next/image`, and so on); without one, components fall back to {@link PlainImage}.
+ */
+type ImageComponent = FC<ImageComponentProps>;
+/**
+ * The framework-free default: a real `<img>`. It reproduces the `next/image` behaviours design-system
+ * layouts depend on — `fill` positioning, a placeholder painted behind the image until it loads, and
+ * lazy loading unless the caller marks the image as priority. Optimisation-only props are
+ * destructured away instead of spread onto the DOM, where React would warn about them.
+ */
+declare const PlainImage: ImageComponent;
+//#endregion
+export { ImageComponent, ImageComponentProps, ImagePlaceholder, ImageSource, PlainImage };