@eightshift/ui-components 6.3.0 → 7.1.0

package/dist/smart-image-CbSsEASF.js

@@ -0,0 +1,284 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { t as DecorativeTooltip } from "./tooltip-BzJzYlcc.js";
+import { cyrb64Hash } from "./utilities/hash.js";
+import { t as __ } from "./build-module-sxK3nxOK.js";
+import { imageError } from "./icons/ui-icons/image-error.js";
+import { cloneElement, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/smart-image/image-analysis-worker.js?raw
+var image_analysis_worker_default = "const getSaturation = (r, g, b) => {\n	// Convert 0-255 to 0-1 range.\n	const red = r / 255;\n	const green = g / 255;\n	const blue = b / 255;\n\n	const max = Math.max(red, green, blue);\n	const min = Math.min(red, green, blue);\n	const delta = max - min;\n\n	// If the maximum brightness is less than ~5% (approx RGB 13),\n	// the human eye just sees \"black\", regardless of the color math.\n	if (max < 0.05) {\n		return 0;\n	}\n\n	// Standard HSV Calculation\n	let saturation = 0;\n\n	if (max !== 0) {\n		saturation = delta / max;\n	}\n\n	return parseFloat(saturation.toFixed(3));\n};\n\n// Helper to convert RGB to Hex\nconst rgbToHex = (r, g, b) => '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n\nself.onmessage = (e) => {\n	const { buffer, width, height, config } = e.data;\n	const { maxColors = 5, threshold = 96, transparencyThreshold = 255 } = config;\n	const stride = 4;\n\n	// [1] Check transparency.\n	const isTransparent = (idx) => buffer[idx + 3] < transparencyThreshold;\n	const getIdx = (x, y) => (y * width + x) * stride;\n\n	const corners = {\n		topLeft: isTransparent(getIdx(0, 0)),\n		topRight: isTransparent(getIdx(width - 1, 0)),\n		bottomLeft: isTransparent(getIdx(0, height - 1)),\n		bottomRight: isTransparent(getIdx(width - 1, height - 1)),\n	};\n\n	const sides = { top: false, bottom: false, left: false, right: false };\n\n	// Scan top/bottom.\n	for (let x = 0; x < width; x += 5) {\n		if (!sides.top && isTransparent(getIdx(x, 0))) {\n			sides.top = true;\n		}\n\n		if (!sides.bottom && isTransparent(getIdx(x, height - 1))) {\n			sides.bottom = true;\n		}\n	}\n\n	// Scan left/right.\n	for (let y = 0; y < height; y += 5) {\n		if (!sides.left && isTransparent(getIdx(0, y))) {\n			sides.left = true;\n		}\n\n		if (!sides.right && isTransparent(getIdx(width - 1, y))) {\n			sides.right = true;\n		}\n	}\n\n	// Internal transparency check\n	let internalTransparent = false;\n	const borderIsSolid = !Object.values(sides).some((v) => v);\n\n	if (borderIsSolid) {\n		const len = buffer.length;\n		const step = Math.floor(len / 100);\n\n		for (let i = 0; i < len; i += step) {\n			const idx = i - (i % 4);\n\n			if (buffer[idx + 3] < 255) {\n				internalTransparent = true;\n				break;\n			}\n		}\n	} else {\n		internalTransparent = true;\n	}\n\n	// [2] Analyze colors (Dominant + average)\n	const colorCounts = {};\n	const samplingRate = 20;\n	let totalSampledPixels = 0;\n\n	// Accumulators for Average Color\n	let sumR = 0;\n	let sumG = 0;\n	let sumB = 0;\n\n	for (let i = 0; i < buffer.length; i += stride * samplingRate) {\n		const rRaw = buffer[i];\n		const gRaw = buffer[i + 1];\n		const bRaw = buffer[i + 2];\n		const a = buffer[i + 3];\n\n		// Strict alpha check (ignores anti-aliased SVG edges)\n		if (a < 250) continue;\n\n		totalSampledPixels++;\n\n		// 1. Add to Average Sums (Use raw values for accuracy)\n		sumR += rRaw;\n		sumG += gRaw;\n		sumB += bRaw;\n\n		// 2. Add to Dominant Color Buckets (Quantized)\n		const q = 5;\n		const r = Math.round(rRaw / q) * q;\n		const g = Math.round(gRaw / q) * q;\n		const b = Math.round(bRaw / q) * q;\n\n		const key = `${r},${g},${b}`;\n		colorCounts[key] = (colorCounts[key] || 0) + 1;\n	}\n\n	// [3] Calculate Average Color\n	let averageColor = null;\n\n	if (totalSampledPixels > 0) {\n		const avgR = Math.round(sumR / totalSampledPixels);\n		const avgG = Math.round(sumG / totalSampledPixels);\n		const avgB = Math.round(sumB / totalSampledPixels);\n		const avgLum = 0.2126 * avgR + 0.7152 * avgG + 0.0722 * avgB;\n\n		averageColor = {\n			color: rgbToHex(avgR, avgG, avgB),\n			isDark: avgLum <= 128,\n			saturation: getSaturation(avgR, avgG, avgB),\n		};\n	}\n\n	// [4] Process Dominant Colors\n	const sortedRawColors = Object.entries(colorCounts)\n		.map(([key, count]) => {\n			const [r, g, b] = key.split(',').map(Number);\n\n			return { r, g, b, count };\n		})\n		.sort((a, b) => b.count - a.count);\n\n	const distinctPalette = [];\n\n	for (const candidate of sortedRawColors) {\n		if (distinctPalette.length >= maxColors) break;\n\n		let isSimilar = false;\n\n		for (const existing of distinctPalette) {\n			const dist = Math.sqrt(Math.pow(candidate.r - existing.r, 2) + Math.pow(candidate.g - existing.g, 2) + Math.pow(candidate.b - existing.b, 2));\n\n			if (dist < threshold) {\n				existing.count += candidate.count;\n				isSimilar = true;\n				break;\n			}\n		}\n\n		if (!isSimilar) {\n			distinctPalette.push({ ...candidate });\n		}\n	}\n\n	const palette = distinctPalette.map((item) => {\n		const percentage = parseFloat((item.count / totalSampledPixels).toFixed(3));\n		const lum = 0.2126 * item.r + 0.7152 * item.g + 0.0722 * item.b;\n\n		return {\n			color: rgbToHex(item.r, item.g, item.b),\n			area: percentage,\n			isDark: lum <= 128,\n			saturation: getSaturation(item.r, item.g, item.b),\n		};\n	});\n\n	self.postMessage({\n		dominantColors: palette,\n		averageColor,\n		isDark: palette[0]?.isDark || false,\n		isTransparent: internalTransparent || Object.values(corners).some((v) => v) || Object.values(sides).some((v) => v),\n		transparencyInfo: {\n			any: internalTransparent,\n			left: sides.left,\n			right: sides.right,\n			top: sides.top,\n			bottom: sides.bottom,\n			topLeftCorner: corners.topLeft,\n			topRightCorner: corners.topRight,\n			bottomLeftCorner: corners.bottomLeft,\n			bottomRightCorner: corners.bottomRight,\n		},\n	});\n};\n";
+//#endregion
+//#region lib/components/smart-image/smart-image.jsx
+/**
+* @typedef {Object} CustomImageProps
+* @property {JSX.Element} [props.renderError] - Component to render if image analysis fails. `(error) => JSX:Element`.
+* @property {string} [props.errorClassName] - Classes to pass to the default error view.
+* @property {string} [props.processingClassName] - Classes to apply while the image is loading / being processed.
+* @property {boolean} [props.hidden] - If `true`, the component is not rendered.
+* @property {boolean} [props.verbose] - If `true`, extra debug info is logged in case of errors.
+* @property {import('../../utilities/general.js').ImageAnalysisSettings} [imageAnalysisSettings] - Settings to pass to the image analysis function.
+* @property {import('../../utilities/general.js').ImageAnalysisResult} [analysisData] - Previous analysis result to pass in directly, skipping analysis.
+* @property {number} [props.colorCount=3] - Number of dominant colors to extract. Falls back to `imageAnalysisSettings.numColors` when omitted.
+* @property {number} [props.similarityThreshold=10] - Distance threshold for merging similar colors during palette extraction.
+* @property {(result: import('../../utilities/general.js').ImageAnalysisResult, meta: { source: 'worker' | 'cache' | 'analysisData' }) => void} [props.onAnalysisComplete] - Called when analysis data becomes available, with metadata describing where it came from.
+*/
+/**
+* @typedef {Omit<JSX.IntrinsicElements['img'], 'crossOrigin'>} BaseImageProps
+*/
+/**
+* @typedef {CustomImageProps & BaseImageProps} ImageProps
+*/
+function isValidUrl(url) {
+	try {
+		new URL(url);
+		return true;
+	} catch {
+		return false;
+	}
+}
+async function urlExists(url) {
+	if (!isValidUrl(url)) return false;
+	try {
+		await fetch(url, {
+			method: "HEAD",
+			mode: "no-cors"
+		});
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
+* Image that analyzes its contents and can apply different classes based on image transparency.
+* It also provides a CSS variable with the image's dominant color, and optionally custom child rendering with all the data exposed.
+*
+* @component
+* @param {ImageProps} props - Component props.
+*
+* @returns {JSX.Element} The SmartImage component.
+*
+* @example
+* <SmartImage src='https://picsum.photos/600/400' />
+*
+* @example
+* <SmartImage src='https://picsum.photos/600/400'>
+*     {({ image, dominantColors, isDark }) => (
+*         <div style={{ backgroundColor: dominantColors[0].color }}>
+*             {image}
+*             <p style={{ color: isDark ? '#000000' : '#FFFFFF' }}>Lorem ipsum</p>
+*         </div>
+*     )}
+* </SmartImage>
+*/
+var SmartImage = (props) => {
+	const { onAnalysisComplete, colorCount: colorCountProp, similarityThreshold = 10 } = props;
+	const { imageAnalysisSettings, errorClassName, processingClassName = "es:opacity-0 es:fixed", hidden, renderError, analysisData, children, verbose, ...imageProps } = props;
+	const { src } = imageProps;
+	const resolvedColorCount = colorCountProp ?? imageAnalysisSettings?.numColors ?? 3;
+	const [analysis, setAnalysis] = useState(analysisData);
+	const [error, setError] = useState(null);
+	const [objectUrl, setObjectUrl] = useState(null);
+	const workerRef = useRef(null);
+	const lastAnalysisNotificationKeyRef = useRef(null);
+	useEffect(() => {
+		const blob = new Blob([image_analysis_worker_default], { type: "application/javascript" });
+		workerRef.current = new Worker(URL.createObjectURL(blob));
+		return () => workerRef.current.terminate();
+	}, []);
+	useEffect(() => {
+		lastAnalysisNotificationKeyRef.current = null;
+	}, [src]);
+	useEffect(() => {
+		let isActive = true;
+		const abortController = new AbortController();
+		const workerConfig = {
+			maxColors: resolvedColorCount,
+			threshold: similarityThreshold
+		};
+		const notifyAnalysisComplete = (result, source) => {
+			if (!onAnalysisComplete || !result) return;
+			const notificationKey = `${src ?? ""}:${source}:${cyrb64Hash(JSON.stringify(result))}`;
+			if (lastAnalysisNotificationKeyRef.current === notificationKey) return;
+			lastAnalysisNotificationKeyRef.current = notificationKey;
+			onAnalysisComplete(result, { source });
+		};
+		if (!src) {
+			setObjectUrl(null);
+			return () => {
+				isActive = false;
+				abortController.abort();
+			};
+		}
+		if (analysisData) {
+			setAnalysis(analysisData);
+			setObjectUrl(src);
+			notifyAnalysisComplete(analysisData, "analysisData");
+			return () => {
+				isActive = false;
+				abortController.abort();
+			};
+		}
+		const cacheKey = `es-uic-img-data-${cyrb64Hash(src)}`;
+		if (localStorage?.getItem(cacheKey)) {
+			const cachedAnalysis = JSON.parse(localStorage.getItem(cacheKey));
+			if (cachedAnalysis) {
+				setAnalysis(cachedAnalysis);
+				setObjectUrl(src);
+				notifyAnalysisComplete(cachedAnalysis, "cache");
+			}
+		}
+		if (!localStorage?.getItem(cacheKey) || !JSON.parse(localStorage.getItem(cacheKey))) {
+			const processImage = async () => {
+				try {
+					const response = await fetch(src, {
+						signal: abortController.signal,
+						mode: "cors"
+					});
+					if (src.includes("uikit")) console.log("tusam?", src, response);
+					if (!response.ok) {
+						if (verbose) console.error(`[SmartImage]: Failed to fetch (${response.status}) image from ${src}`);
+					}
+					const blob = await response.clone().blob();
+					if (blob.size === 0) {
+						if (verbose) console.error(`[SmartImage]: Empty image (${src})`);
+					}
+					const url = URL.createObjectURL(blob);
+					if (isActive) setObjectUrl(url);
+					let imageSource, width, height;
+					if (blob.type.includes("svg")) {
+						const img = new Image();
+						img.src = url;
+						await new Promise((resolve, reject) => {
+							img.onload = resolve;
+							img.onerror = reject;
+						});
+						width = img.width || 500;
+						height = img.height || 500;
+						imageSource = img;
+					} else try {
+						imageSource = await createImageBitmap(blob);
+						width = imageSource.width;
+						height = imageSource.height;
+					} catch (e) {
+						if (verbose) console.warn("[SmartImage]: createImageBitmap failed, falling back to HTML Image method.", e);
+					}
+					let buffer, arrayBuffer;
+					if (typeof OffscreenCanvas !== "undefined") {
+						const ctx = new OffscreenCanvas(width, height).getContext("2d", { willReadFrequently: true });
+						ctx.clearRect(0, 0, width, height);
+						ctx.drawImage(imageSource, 0, 0, width, height);
+						buffer = ctx.getImageData(0, 0, width, height).data;
+						arrayBuffer = buffer.buffer;
+					} else {
+						const canvas = document.createElement("canvas");
+						canvas.width = width;
+						canvas.height = height;
+						const ctx = canvas.getContext("2d");
+						ctx.clearRect(0, 0, width, height);
+						ctx.drawImage(imageSource, 0, 0, width, height);
+						buffer = ctx.getImageData(0, 0, width, height).data;
+						arrayBuffer = buffer.buffer;
+					}
+					if (imageSource.close) imageSource.close();
+					if (workerRef.current) {
+						workerRef.current.onmessage = (e) => {
+							if (!isActive) return;
+							setAnalysis(e.data);
+							localStorage?.setItem(cacheKey, JSON.stringify(e.data));
+							notifyAnalysisComplete(e.data, "worker");
+						};
+						try {
+							workerRef.current.postMessage({
+								buffer,
+								width,
+								height,
+								config: workerConfig
+							}, [arrayBuffer]);
+						} catch (msgErr) {
+							workerRef.current.postMessage({
+								buffer,
+								width,
+								height,
+								config: workerConfig
+							});
+						}
+					}
+				} catch (err) {
+					if (isActive) {
+						if (verbose) console.error("[SmartImage] Error:", err);
+						if (await urlExists(src)) setError(err.message);
+						else setError("failedToFetch");
+						setObjectUrl(null);
+					}
+				}
+			};
+			processImage();
+		}
+		return () => {
+			isActive = false;
+			abortController.abort();
+		};
+	}, [
+		analysisData,
+		imageAnalysisSettings?.numColors,
+		onAnalysisComplete,
+		resolvedColorCount,
+		similarityThreshold,
+		src,
+		verbose
+	]);
+	const hasAnalysed = Boolean(analysis) && Boolean(objectUrl);
+	const { dominantColors, isDark, isTransparent, transparencyInfo, averageColor } = analysis || {};
+	const classFetchProps = {
+		isLoaded: true,
+		dominantColors,
+		isDark,
+		hasAnalysed: Boolean(error) || hasAnalysed,
+		isTransparent,
+		transparencyInfo,
+		averageColor,
+		hasError: error === "failedToFetch"
+	};
+	if (hidden) return null;
+	const colorfulDominantColor = dominantColors?.find((c) => c.saturation > .25 && c.area >= .1) || dominantColors?.[0];
+	const imageElement = jsx("img", {
+		decoding: "async",
+		...imageProps,
+		src: analysis && objectUrl && !error ? objectUrl : imageProps?.src,
+		style: {
+			...imageProps.style || {},
+			"--es-img-dominant-color": dominantColors?.[0]?.color ?? "",
+			"--es-img-colorful-dominant-color": colorfulDominantColor?.color ?? "",
+			"--es-img-average-color": averageColor?.color ?? ""
+		},
+		className: clsx("es:transition-opacity", !hasAnalysed && !error && processingClassName, typeof imageProps.className === "function" ? imageProps.className(classFetchProps) : imageProps.className),
+		"data-is-transparent": isTransparent,
+		"data-is-dark": isDark
+	});
+	if (error && renderError) return renderError(error);
+	else if (error === "failedToFetch") return jsxs("div", {
+		className: clsx(typeof children !== "function" && "es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center es:p-2", "es:motion-preset-fade", errorClassName),
+		children: [typeof children !== "function" && jsx(DecorativeTooltip, {
+			text: __("Error loading image", "eightshift-ui-components"),
+			children: cloneElement(imageError, { className: "es:text-surface-600 es:size-8" })
+		}), typeof children === "function" ? children({
+			image: cloneElement(imageElement, { crossOrigin: null }),
+			hasAnalysed,
+			isTransparent: false,
+			hasError: true,
+			errorBadge: jsx("div", {
+				className: "es:size-full es:flex es:items-center es:justify-center",
+				children: jsx(DecorativeTooltip, {
+					text: __("Error loading image", "eightshift-ui-components"),
+					children: cloneElement(imageError, { className: "es:text-surface-600 es:size-8" })
+				})
+			})
+		}) : cloneElement(imageElement, { crossOrigin: null })]
+	});
+	return children && typeof children === "function" ? children({
+		image: imageElement,
+		...classFetchProps
+	}) : imageElement;
+};
+//#endregion
+export { SmartImage as t };