@neut/ui 0.0.8 → 0.0.10

package/dist/components/image/Image.config.js

@@ -50,6 +50,6 @@ function a(e, t) {
 	};
 }
 //#endregion
-export { n as imageConfigDefault, a as resolveConfig, i as useImageConfig };
+export { r as ImageConfigContext, n as imageConfigDefault, a as resolveConfig, i as useImageConfig };
 
 //# sourceMappingURL=Image.config.js.map

package/dist/components/image/Image.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.config.js","names":[],"sources":["../../../src/components/image/Image.config.ts"],"sourcesContent":["/**\n * image-config.ts\n * 单一职责：提供图片配置的默认值，以及通过 SolidJS Context 向下传递配置的机制。\n * 不包含任何渲染逻辑。\n */\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { ImageConfigComplete } from \"./Image.types\";\n\n// ─── 默认配置 ─────────────────────────────────────────────────────────────────\n\nexport const imageConfigDefault: ImageConfigComplete = {\n  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],\n  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],\n  loader: \"default\",\n  path: \"/_next/image\",\n  loaderFile: \"\",\n  domains: [],\n  disableStaticImages: false,\n  minimumCacheTTL: 60,\n  formats: [\"image/webp\"],\n  dangerouslyAllowSVG: false,\n  contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`,\n  contentDispositionType: \"attachment\",\n  remotePatterns: [],\n  unoptimized: false,\n};\n\n// ─── SolidJS Context ──────────────────────────────────────────────────────────\n\n/**\n * 向子树提供自定义图片配置。\n * 用法：\n *   <ImageConfigProvider value={myConfig}>\n *     <App />\n *   </ImageConfigProvider>\n */\nexport const ImageConfigContext =\n  createContext<ImageConfigComplete>(imageConfigDefault);\n\nexport function useImageConfig(): ImageConfigComplete {\n  return useContext(ImageConfigContext);\n}\n\n// ─── 配置合并工具 ──────────────────────────────────────────────────────────────\n\n/**\n * 将上下文配置与运行时注入的配置合并，\n * 并预计算派生字段（allSizes、排序后的 deviceSizes / qualities）。\n */\nexport function resolveConfig(\n  contextConfig: ImageConfigComplete,\n  envConfig?: Partial<ImageConfigComplete>,\n): ImageConfigComplete {\n  const c: ImageConfigComplete = { ...contextConfig, ...(envConfig ?? {}) };\n\n  const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b);\n  const deviceSizes = [...c.deviceSizes].sort((a, b) => a - b);\n  const qualities = c.qualities\n    ? [...c.qualities].sort((a, b) => a - b)\n    : undefined;\n\n  return { ...c, allSizes, deviceSizes, qualities };\n}\n"],"mappings":";;AAWA,IAAa,IAA0C;CACrD,aAAa;EAAC;EAAK;EAAK;EAAK;EAAM;EAAM;EAAM;EAAM;EAAK;CAC1D,YAAY;EAAC;EAAI;EAAI;EAAI;EAAI;EAAI;EAAK;EAAK;EAAI;CAC/C,QAAQ;CACR,MAAM;CACN,YAAY;CACZ,SAAS,EAAE;CACX,qBAAqB;CACrB,iBAAiB;CACjB,SAAS,CAAC,aAAa;CACvB,qBAAqB;CACrB,uBAAuB;CACvB,wBAAwB;CACxB,gBAAgB,EAAE;CAClB,aAAa;CACd,EAWY,IACX,EAAmC,EAAmB;AAExD,SAAgB,IAAsC;AACpD,QAAO,EAAW,EAAmB;;AASvC,SAAgB,EACd,GACA,GACqB;CACrB,IAAM,IAAyB;EAAE,GAAG;EAAe,GAAI,KAAa,EAAE;EAAG,EAEnE,IAAW,CAAC,GAAG,EAAE,aAAa,GAAG,EAAE,WAAW,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE,EACpE,IAAc,CAAC,GAAG,EAAE,YAAY,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE,EACtD,IAAY,EAAE,YAChB,CAAC,GAAG,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE,GACtC,KAAA;AAEJ,QAAO;EAAE,GAAG;EAAG;EAAU;EAAa;EAAW"}
+{"version":3,"file":"Image.config.js","names":[],"sources":["../../../src/components/image/Image.config.ts"],"sourcesContent":["/**\n * image-config.ts\n * 单一职责：提供图片配置的默认值，以及通过 SolidJS Context 向下传递配置的机制。\n * 不包含任何渲染逻辑。\n */\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { ImageConfigComplete } from \"./Image.types\";\n\n// ─── 默认配置 ─────────────────────────────────────────────────────────────────\n\nexport const imageConfigDefault: ImageConfigComplete = {\n  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],\n  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],\n  loader: \"default\",\n  path: \"/_next/image\",\n  loaderFile: \"\",\n  domains: [],\n  disableStaticImages: false,\n  minimumCacheTTL: 60,\n  formats: [\"image/webp\"],\n  dangerouslyAllowSVG: false,\n  contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`,\n  contentDispositionType: \"attachment\",\n  remotePatterns: [],\n  unoptimized: false,\n};\n\n// ─── SolidJS Context ──────────────────────────────────────────────────────────\n\n/**\n * 向子树提供自定义图片配置。\n * 用法：\n *   <ImageConfigProvider value={myConfig}>\n *     <App />\n *   </ImageConfigProvider>\n */\nexport const ImageConfigContext =\n  createContext<ImageConfigComplete>(imageConfigDefault);\n\nexport function useImageConfig(): ImageConfigComplete {\n  return useContext(ImageConfigContext);\n}\n\n// ─── 配置合并工具 ──────────────────────────────────────────────────────────────\n\n/**\n * 将上下文配置与运行时注入的配置合并，\n * 并预计算派生字段（allSizes、排序后的 deviceSizes / qualities）。\n */\nexport function resolveConfig(\n  contextConfig: ImageConfigComplete,\n  envConfig?: Partial<ImageConfigComplete>,\n): ImageConfigComplete {\n  const c: ImageConfigComplete = { ...contextConfig, ...(envConfig ?? {}) };\n\n  const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b);\n  const deviceSizes = [...c.deviceSizes].sort((a, b) => a - b);\n  const qualities = c.qualities\n    ? [...c.qualities].sort((a, b) => a - b)\n    : undefined;\n\n  return { ...c, allSizes, deviceSizes, qualities };\n}\n"],"mappings":";;AAWA,IAAa,IAA0C;CACrD,aAAa;EAAC;EAAK;EAAK;EAAK;EAAM;EAAM;EAAM;EAAM;CAAI;CACzD,YAAY;EAAC;EAAI;EAAI;EAAI;EAAI;EAAI;EAAK;EAAK;CAAG;CAC9C,QAAQ;CACR,MAAM;CACN,YAAY;CACZ,SAAS,CAAC;CACV,qBAAqB;CACrB,iBAAiB;CACjB,SAAS,CAAC,YAAY;CACtB,qBAAqB;CACrB,uBAAuB;CACvB,wBAAwB;CACxB,gBAAgB,CAAC;CACjB,aAAa;AACf,GAWa,IACX,EAAmC,CAAkB;AAEvD,SAAgB,IAAsC;CACpD,OAAO,EAAW,CAAkB;AACtC;AAQA,SAAgB,EACd,GACA,GACqB;CACrB,IAAM,IAAyB;EAAE,GAAG;EAAe,GAAI,KAAa,CAAC;CAAG,GAElE,IAAW,CAAC,GAAG,EAAE,aAAa,GAAG,EAAE,UAAU,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,GACnE,IAAc,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,GACrD,IAAY,EAAE,YAChB,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,IACrC,KAAA;CAEJ,OAAO;EAAE,GAAG;EAAG;EAAU;EAAa;CAAU;AAClD"}

package/dist/components/image/Image.js

@@ -6,20 +6,20 @@ import { createComponent as a, mergeProps as o } from "solid-js/web";
 import { Show as s, createMemo as c, createSignal as l } from "solid-js";
 //#region src/components/image/Image.tsx
 var u = (u) => {
-	let d = e(t()), [f, p] = l(!1), [m, h] = l(!1), g = c(() => n(u, {
-		imgConf: d,
-		blurComplete: f(),
-		showAltText: m()
-	})), _ = () => g().props, v = () => g().meta;
-	return [a(r, o(_, {
+	let d = t(), f = e(d), [p, m] = l(!1), [h, g] = l(!1), _ = c(() => n(u, {
+		imgConf: f,
+		blurComplete: p(),
+		showAltText: h()
+	})), v = () => _().props, y = () => _().meta;
+	return [a(r, o(v, {
 		get unoptimized() {
-			return v().unoptimized;
+			return y().unoptimized;
 		},
 		get placeholder() {
-			return v().placeholder;
+			return y().placeholder;
 		},
 		get fill() {
-			return v().fill;
+			return y().fill;
 		},
 		get onLoad() {
 			return u.onLoad;
@@ -27,18 +27,18 @@ var u = (u) => {
 		get onLoadingComplete() {
 			return u.onLoadingComplete;
 		},
-		setBlurComplete: p,
-		setShowAltText: h,
+		setBlurComplete: m,
+		setShowAltText: g,
 		get sizesInput() {
 			return u.sizes;
 		}
 	})), a(s, {
 		get when() {
-			return v().preload;
+			return y().preload;
 		},
 		get children() {
 			return a(i, { get imgAttributes() {
-				return _();
+				return v();
 			} });
 		}
 	})];

package/dist/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["Component","createMemo","createSignal","Show","resolveConfig","useImageConfig","ImageProps","ImgPropsResult","PlaceholderValue","getImgProps","ImageElement","ImagePreload","Image","props","contextConfig","config","blurComplete","setBlurComplete","showAltText","setShowAltText","result","imgConf","imgAttributes","imgMeta","meta","_$createComponent","_$mergeProps","unoptimized","placeholder","fill","onLoad","onLoadingComplete","sizesInput","sizes","when","preload","children"],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["/**\n * Image.tsx\n * 单一职责：组合层——解析 props、管理 blur/showAltText 状态、\n * 合并配置，然后将职责委托给 ImageElement 和 ImagePreload。\n * 不包含任何加载逻辑或 DOM 操作。\n */\n\nimport { type Component, createMemo, createSignal, Show } from \"solid-js\";\nimport { resolveConfig, useImageConfig } from \"./Image.config\";\nimport type {\n  ImageProps,\n  ImgPropsResult,\n  PlaceholderValue,\n} from \"./Image.types\";\nimport { getImgProps } from \"./Image.utils\";\nimport ImageElement from \"./ImageElement\";\nimport ImagePreload from \"./ImagePreload\";\n\n// ─── 组件 ─────────────────────────────────────────────────────────────────────\n\n/**\n * <Image> 组件\n *\n * 与 Next.js Image 功能对等：\n * - 自动 srcSet 生成\n * - blur placeholder 支持\n * - fill 模式\n * - priority preload\n * - 开发环境警告\n */\nexport const Image: Component<ImageProps> = (props) => {\n  const contextConfig = useImageConfig();\n\n  // 合并并预计算配置（memoized via SolidJS 细粒度响应式）\n  const config = resolveConfig(contextConfig);\n\n  // ── 本地状态 ──────────────────────────────────────────────────────────────\n  const [blurComplete, setBlurComplete] = createSignal(false);\n  const [showAltText, setShowAltText] = createSignal(false);\n\n  // ── 派生属性 ──────────────────────────────────────────────────────────────\n  // getImgProps 将 ImageProps 转换为原生 img 可接受的属性集\n  const result = createMemo(\n    (): ImgPropsResult =>\n      getImgProps(props, {\n        imgConf: config,\n        blurComplete: blurComplete(),\n        showAltText: showAltText(),\n      }),\n  );\n\n  const imgAttributes = () => result().props;\n  const imgMeta = () => result().meta;\n\n  return (\n    <>\n      <ImageElement\n        {...imgAttributes()}\n        unoptimized={imgMeta().unoptimized}\n        placeholder={imgMeta().placeholder as PlaceholderValue}\n        fill={imgMeta().fill}\n        onLoad={props.onLoad}\n        onLoadingComplete={props.onLoadingComplete}\n        setBlurComplete={setBlurComplete}\n        setShowAltText={setShowAltText}\n        sizesInput={props.sizes}\n      />\n\n      <Show when={imgMeta().preload}>\n        <ImagePreload imgAttributes={imgAttributes()} />\n      </Show>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AA8BA,IAAaY,KAAgCC,MAAU;CAIrD,IAAME,IAASX,EAHOC,GAAgB,CAGK,EAGrC,CAACW,GAAcC,KAAmBf,EAAa,GAAM,EACrD,CAACgB,GAAaC,KAAkBjB,EAAa,GAAM,EAInDkB,IAASnB,QAEXQ,EAAYI,GAAO;EACjBQ,SAASN;EACTC,cAAcA,GAAc;EAC5BE,aAAaA,GAAY;EAC1B,CACL,CAAC,EAEKI,UAAsBF,GAAQ,CAACP,OAC/BU,UAAgBH,GAAQ,CAACI;AAE/B,QAAA,CAAAC,EAEKf,GAAYgB,EACPJ,GAAa;EAAA,IACjBK,cAAW;AAAA,UAAEJ,GAAS,CAACI;;EAAW,IAClCC,cAAW;AAAA,UAAEL,GAAS,CAACK;;EAA+B,IACtDC,OAAI;AAAA,UAAEN,GAAS,CAACM;;EAAI,IACpBC,SAAM;AAAA,UAAEjB,EAAMiB;;EAAM,IACpBC,oBAAiB;AAAA,UAAElB,EAAMkB;;EACRd;EACDE;EAAc,IAC9Ba,aAAU;AAAA,UAAEnB,EAAMoB;;EAAK,CAAA,CAAA,EAAAR,EAGxBtB,GAAI;EAAA,IAAC+B,OAAI;AAAA,UAAEX,GAAS,CAACY;;EAAO,IAAAC,WAAA;AAAA,UAAAX,EAC1Bd,GAAY,EAAA,IAACW,gBAAa;AAAA,WAAEA,GAAe;MAAA,CAAA;;EAAA,CAAA,CAAA"}
+{"version":3,"file":"Image.js","names":["Component","createMemo","createSignal","Show","resolveConfig","useImageConfig","ImageProps","ImgPropsResult","PlaceholderValue","getImgProps","ImageElement","ImagePreload","Image","props","contextConfig","config","blurComplete","setBlurComplete","showAltText","setShowAltText","result","imgConf","imgAttributes","imgMeta","meta","_$createComponent","_$mergeProps","unoptimized","placeholder","fill","onLoad","onLoadingComplete","sizesInput","sizes","when","preload","children"],"sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["/**\n * Image.tsx\n * 单一职责：组合层——解析 props、管理 blur/showAltText 状态、\n * 合并配置，然后将职责委托给 ImageElement 和 ImagePreload。\n * 不包含任何加载逻辑或 DOM 操作。\n */\n\nimport { type Component, createMemo, createSignal, Show } from \"solid-js\";\nimport { resolveConfig, useImageConfig } from \"./Image.config\";\nimport type {\n  ImageProps,\n  ImgPropsResult,\n  PlaceholderValue,\n} from \"./Image.types\";\nimport { getImgProps } from \"./Image.utils\";\nimport ImageElement from \"./ImageElement\";\nimport ImagePreload from \"./ImagePreload\";\n\n// ─── 组件 ─────────────────────────────────────────────────────────────────────\n\n/**\n * <Image> 组件\n *\n * 与 Next.js Image 功能对等：\n * - 自动 srcSet 生成\n * - blur placeholder 支持\n * - fill 模式\n * - priority preload\n * - 开发环境警告\n */\nexport const Image: Component<ImageProps> = (props) => {\n  const contextConfig = useImageConfig();\n\n  // 合并并预计算配置（memoized via SolidJS 细粒度响应式）\n  const config = resolveConfig(contextConfig);\n\n  // ── 本地状态 ──────────────────────────────────────────────────────────────\n  const [blurComplete, setBlurComplete] = createSignal(false);\n  const [showAltText, setShowAltText] = createSignal(false);\n\n  // ── 派生属性 ──────────────────────────────────────────────────────────────\n  // getImgProps 将 ImageProps 转换为原生 img 可接受的属性集\n  const result = createMemo(\n    (): ImgPropsResult =>\n      getImgProps(props, {\n        imgConf: config,\n        blurComplete: blurComplete(),\n        showAltText: showAltText(),\n      }),\n  );\n\n  const imgAttributes = () => result().props;\n  const imgMeta = () => result().meta;\n\n  return (\n    <>\n      <ImageElement\n        {...imgAttributes()}\n        unoptimized={imgMeta().unoptimized}\n        placeholder={imgMeta().placeholder as PlaceholderValue}\n        fill={imgMeta().fill}\n        onLoad={props.onLoad}\n        onLoadingComplete={props.onLoadingComplete}\n        setBlurComplete={setBlurComplete}\n        setShowAltText={setShowAltText}\n        sizesInput={props.sizes}\n      />\n\n      <Show when={imgMeta().preload}>\n        <ImagePreload imgAttributes={imgAttributes()} />\n      </Show>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AA8BA,IAAaY,KAAgCC,MAAU;CACrD,IAAMC,IAAgBT,EAAe,GAG/BU,IAASX,EAAcU,CAAa,GAGpC,CAACE,GAAcC,KAAmBf,EAAa,EAAK,GACpD,CAACgB,GAAaC,KAAkBjB,EAAa,EAAK,GAIlDkB,IAASnB,QAEXQ,EAAYI,GAAO;EACjBQ,SAASN;EACTC,cAAcA,EAAa;EAC3BE,aAAaA,EAAY;CAC3B,CAAC,CACL,GAEMI,UAAsBF,EAAO,CAAC,CAACP,OAC/BU,UAAgBH,EAAO,CAAC,CAACI;CAE/B,OAAA,CAAAC,EAEKf,GAAYgB,EACPJ,GAAa;EAAA,IACjBK,cAAW;GAAA,OAAEJ,EAAQ,CAAC,CAACI;EAAW;EAAA,IAClCC,cAAW;GAAA,OAAEL,EAAQ,CAAC,CAACK;EAA+B;EAAA,IACtDC,OAAI;GAAA,OAAEN,EAAQ,CAAC,CAACM;EAAI;EAAA,IACpBC,SAAM;GAAA,OAAEjB,EAAMiB;EAAM;EAAA,IACpBC,oBAAiB;GAAA,OAAElB,EAAMkB;EAAiB;EACzBd;EACDE;EAAc,IAC9Ba,aAAU;GAAA,OAAEnB,EAAMoB;EAAK;CAAA,CAAA,CAAA,GAAAR,EAGxBtB,GAAI;EAAA,IAAC+B,OAAI;GAAA,OAAEX,EAAQ,CAAC,CAACY;EAAO;EAAA,IAAAC,WAAA;GAAA,OAAAX,EAC1Bd,GAAY,EAAA,IAACW,gBAAa;IAAA,OAAEA,EAAc;GAAC,EAAA,CAAA;EAAA;CAAA,CAAA,CAAA;AAIpD"}

package/dist/components/image/Image.utils.js

@@ -24,14 +24,14 @@ var i = [
 	void 0
 ];
 function a(r, { imgConf: a, blurComplete: l, showAltText: p }) {
-	let [m, h] = n(t({
+	let m = t({
 		fill: !1,
 		priority: !1,
 		preload: !1,
 		placeholder: "empty",
 		unoptimized: a.unoptimized,
 		decoding: "async"
-	}, r), [
+	}, r), [h, g] = n(m, [
 		"src",
 		"loader",
 		"quality",
@@ -57,21 +57,21 @@ function a(r, { imgConf: a, blurComplete: l, showAltText: p }) {
 		"fetchpriority",
 		"class",
 		"decoding"
-	]), g, _ = a || e;
-	if ("allSizes" in _) g = _;
+	]), _, v = a || e;
+	if ("allSizes" in v) _ = v;
 	else {
-		let e = [..._.deviceSizes, ..._.imageSizes].sort((e, t) => e - t), t = _.deviceSizes.sort((e, t) => e - t), n = _.qualities?.sort((e, t) => e - t);
-		g = {
-			..._,
+		let e = [...v.deviceSizes, ...v.imageSizes].sort((e, t) => e - t), t = v.deviceSizes.sort((e, t) => e - t), n = v.qualities?.sort((e, t) => e - t);
+		_ = {
+			...v,
 			allSizes: e,
 			deviceSizes: t,
 			qualities: n
 		};
 	}
 	if (o === void 0) throw Error("images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config");
-	let v = m.style, y = m.sizes, b = m.fill, x = m.loader || o;
-	if (m.layout) {
-		m.layout === "fill" && (b = !0);
+	let y = h.style, b = h.sizes, x = h.fill, S = h.loader || o;
+	if (h.layout) {
+		h.layout === "fill" && (x = !0);
 		let e = {
 			intrinsic: {
 				maxWidth: "100%",
@@ -84,33 +84,33 @@ function a(r, { imgConf: a, blurComplete: l, showAltText: p }) {
 		}, t = {
 			responsive: "100vw",
 			fill: "100vw"
-		}, n = e[m.layout];
-		n && (v = {
-			...v,
+		}, n = e[h.layout];
+		n && (y = {
+			...y,
 			...n
 		});
-		let r = t[m.layout];
-		r && !y && (y = r);
+		let r = t[h.layout];
+		r && !b && (b = r);
 	}
-	let S = "", C = m.blurDataURL, w = s(m.width), T = s(m.height), E, D;
-	if (u(m.src)) {
-		let e = c(m.src) ? m.src.default : m.src;
+	let C = "", w = h.blurDataURL, T = s(h.width), E = s(h.height), D, O;
+	if (u(h.src)) {
+		let e = c(h.src) ? h.src.default : h.src;
 		if (!e.src) throw Error(`An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ${JSON.stringify(e)}`);
 		if (!e.height || !e.width) throw Error(`An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ${JSON.stringify(e)}`);
-		if (E = e.blurWidth, D = e.blurHeight, C ||= e.blurDataURL, S = e.src, !b) {
-			if (!w && !T) w = e.width, T = e.height;
-			else if (w && !T) {
-				let t = w / e.width;
-				T = Math.round(e.height * t);
-			} else if (!w && T) {
-				let t = T / e.height;
-				w = Math.round(e.width * t);
+		if (D = e.blurWidth, O = e.blurHeight, w ||= e.blurDataURL, C = e.src, !x) {
+			if (!T && !E) T = e.width, E = e.height;
+			else if (T && !E) {
+				let t = T / e.width;
+				E = Math.round(e.height * t);
+			} else if (!T && E) {
+				let t = E / e.height;
+				T = Math.round(e.width * t);
 			}
 		}
 	}
-	let O = typeof m.src == "string" ? m.src : S, k = m.unoptimized, A = !m.priority && !m.preload && (m.loading === "lazy" || m.loading === void 0);
-	(!O || O.startsWith("data:") || O.startsWith("blob:")) && (k = !0, A = !1), g.unoptimized && (k = !0), !g.dangerouslyAllowSVG && O.split("?", 1)[0].endsWith(".svg") && (k = !0);
-	let j = s(m.quality), M = Object.assign(b ? {
+	let k = typeof h.src == "string" ? h.src : C, A = h.unoptimized, j = !h.priority && !h.preload && (h.loading === "lazy" || h.loading === void 0);
+	(!k || k.startsWith("data:") || k.startsWith("blob:")) && (A = !0, j = !1), _.unoptimized && (A = !0), !_.dangerouslyAllowSVG && k.split("?", 1)[0].endsWith(".svg") && (A = !0);
+	let M = s(h.quality), N = Object.assign(x ? {
 		position: "absolute",
 		height: "100%",
 		width: "100%",
@@ -118,51 +118,51 @@ function a(r, { imgConf: a, blurComplete: l, showAltText: p }) {
 		top: 0,
 		right: 0,
 		bottom: 0,
-		objectFit: m.objectFit,
-		objectPosition: m.objectPosition
-	} : {}, p ? {} : { color: "transparent" }, v), N = !l && m.placeholder !== "empty" ? m.placeholder === "blur" ? `url("data:image/svg+xml;charset=utf-8,${d({
-		widthInt: w,
-		heightInt: T,
-		blurWidth: E,
-		blurHeight: D,
-		blurDataURL: C || "",
-		objectFit: M.objectFit
-	})}")` : `url("${m.placeholder}")` : null, P = i.includes(M.objectFit) ? M.objectFit === "fill" ? "100% 100%" : "cover" : M.objectFit, F = N ? {
-		"background-size": P,
-		"background-position": M.objectPosition || "50% 50%",
+		objectFit: h.objectFit,
+		objectPosition: h.objectPosition
+	} : {}, p ? {} : { color: "transparent" }, y), P = !l && h.placeholder !== "empty" ? h.placeholder === "blur" ? `url("data:image/svg+xml;charset=utf-8,${d({
+		widthInt: T,
+		heightInt: E,
+		blurWidth: D,
+		blurHeight: O,
+		blurDataURL: w || "",
+		objectFit: N.objectFit
+	})}")` : `url("${h.placeholder}")` : null, F = i.includes(N.objectFit) ? N.objectFit === "fill" ? "100% 100%" : "cover" : N.objectFit, I = P ? {
+		"background-size": F,
+		"background-position": N.objectPosition || "50% 50%",
 		"background-repeat": "no-repeat",
-		"background-image": N
-	} : {}, I = f({
-		config: g,
-		src: O,
-		unoptimized: k,
-		width: w,
-		quality: j,
-		sizes: y,
-		loader: x
-	}), L = A ? "lazy" : m.loading;
+		"background-image": P
+	} : {}, L = f({
+		config: _,
+		src: k,
+		unoptimized: A,
+		width: T,
+		quality: M,
+		sizes: b,
+		loader: S
+	}), R = j ? "lazy" : h.loading;
 	return {
 		props: {
-			...h,
-			loading: L,
-			fetchpriority: m.fetchpriority,
-			width: w,
-			height: T,
-			decoding: m.decoding,
-			class: m.class,
+			...g,
+			loading: R,
+			fetchpriority: h.fetchpriority,
+			width: T,
+			height: E,
+			decoding: h.decoding,
+			class: h.class,
 			style: {
-				...M,
-				...F
+				...N,
+				...I
 			},
-			sizes: I.sizes,
-			srcSet: I.srcSet,
-			src: m.overrideSrc || I.src
+			sizes: L.sizes,
+			srcSet: L.srcSet,
+			src: h.overrideSrc || L.src
 		},
 		meta: {
-			unoptimized: k,
-			preload: m.preload || m.priority,
-			placeholder: m.placeholder,
-			fill: b
+			unoptimized: A,
+			preload: h.preload || h.priority,
+			placeholder: h.placeholder,
+			fill: x
 		}
 	};
 }

package/dist/components/image/Image.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.utils.js","names":[],"sources":["../../../src/components/image/Image.utils.ts"],"sourcesContent":["/**\n * handle-loading.ts\n * 单一职责：封装图片加载完成后的所有副作用——decode、回调触发、开发环境警告。\n * 纯 TypeScript，不包含任何 JSX 或组件代码。\n */\n\nimport { mergeProps, splitProps } from \"solid-js\";\nimport { warnOnce } from \"~/utils\";\nimport { imageConfigDefault } from \"./Image.config\";\nimport type {\n  ImageConfig,\n  ImageConfigComplete,\n  ImageLoaderProps,\n  ImageLoaderWithConfig,\n  ImageProps,\n  ImgProps,\n  ImgPropsResult,\n  LoadingValue,\n  OnLoad,\n  OnLoadingComplete,\n  PlaceholderStyle,\n  PlaceholderValue,\n  StaticImageData,\n  StaticImport,\n  StaticRequire,\n} from \"./Image.types\";\n\n// ─── 类型补充 ─────────────────────────────────────────────────────────────────\n\n/** 用于追踪每个 img 节点已处理的 src，避免重复触发 */\ntype ImgWithDataProp = HTMLImageElement & { \"data-loaded-src\"?: string };\n\n// ─── 主函数 ───────────────────────────────────────────────────────────────────\n\n/**\n * 在图片加载/hydrate 后调用。\n * - 使用 img.decode() 确保像素已解码再触发回调\n * - 清除 blur placeholder\n * - 开发环境下输出 fill / sizes 相关警告\n */\nexport function handleLoading(\n  img: ImgWithDataProp,\n  placeholder: PlaceholderValue,\n  onLoad: OnLoad | undefined,\n  onLoadingComplete: OnLoadingComplete | undefined,\n  setBlurComplete: (v: boolean) => void,\n  unoptimized: boolean,\n  sizesInput: string | undefined,\n): void {\n  const src = img?.src;\n  // 同一张图只处理一次\n  if (!img || img[\"data-loaded-src\"] === src) return;\n  img[\"data-loaded-src\"] = src;\n\n  const p: Promise<void> = \"decode\" in img ? img.decode() : Promise.resolve();\n\n  p.catch(() => {}).then(() => {\n    // 若组件已卸载则提前退出\n    if (!img.parentElement || !img.isConnected) return;\n\n    if (placeholder !== \"empty\") {\n      setBlurComplete(true);\n    }\n\n    if (onLoad) {\n      const event = new Event(\"load\");\n      Object.defineProperty(event, \"target\", { writable: false, value: img });\n      onLoad(\n        event as Event & { currentTarget: HTMLImageElement; target: Element },\n      );\n    }\n\n    if (onLoadingComplete) {\n      onLoadingComplete(img);\n    }\n\n    if (import.meta.env.DEV) {\n      warnFillUsage(img, unoptimized, sizesInput);\n      warnAspectRatioMismatch(img);\n    }\n  });\n}\n\n// ─── 开发警告辅助 ──────────────────────────────────────────────────────────────\n\nfunction warnFillUsage(\n  img: HTMLImageElement,\n  unoptimized: boolean,\n  sizesInput: string | undefined,\n): void {\n  if (img.getAttribute(\"data-nimg\") !== \"fill\") return;\n\n  const origSrc =\n    new URL(img.src, \"http://n\").searchParams.get(\"url\") || img.src;\n\n  if (!unoptimized) {\n    const widthViewportRatio =\n      img.getBoundingClientRect().width / window.innerWidth;\n    if (widthViewportRatio < 0.6) {\n      if (sizesInput === \"100vw\") {\n        console.warn(\n          `[Image] src=\"${origSrc}\" 设置了 fill 和 sizes=\"100vw\"，但实际渲染宽度不足视口宽度，请调整 sizes 以提升性能。`,\n        );\n      } else if (!sizesInput) {\n        console.warn(\n          `[Image] src=\"${origSrc}\" 设置了 fill 但缺少 sizes 属性，请添加以提升性能。`,\n        );\n      }\n    }\n  }\n\n  if (img.parentElement) {\n    const { position } = window.getComputedStyle(img.parentElement);\n    const valid = [\"absolute\", \"fixed\", \"relative\"];\n    if (!valid.includes(position)) {\n      console.warn(\n        `[Image] src=\"${origSrc}\" 设置了 fill，但父元素 position=\"${position}\"，应为 ${valid.join(\" | \")} 之一。`,\n      );\n    }\n  }\n\n  if (img.height === 0) {\n    console.warn(\n      `[Image] src=\"${origSrc}\" 设置了 fill 且高度为 0，请为父元素设置明确高度。`,\n    );\n  }\n}\n\nfunction warnAspectRatioMismatch(img: HTMLImageElement): void {\n  const heightModified = img.height.toString() !== img.getAttribute(\"height\");\n  const widthModified = img.width.toString() !== img.getAttribute(\"width\");\n  if (\n    (heightModified && !widthModified) ||\n    (!heightModified && widthModified)\n  ) {\n    const origSrc =\n      new URL(img.src, \"http://n\").searchParams.get(\"url\") || img.src;\n    console.warn(\n      `[Image] src=\"${origSrc}\" 仅修改了 width 或 height 其中之一，请同时添加 width: \"auto\" 或 height: \"auto\" 样式以保持宽高比。`,\n    );\n  }\n}\n\ninterface GetImgPropsOptions {\n  imgConf: ImageConfigComplete;\n  blurComplete: boolean;\n  showAltText: boolean;\n}\n\nexport const VALID_LOADING_VALUES = [\"lazy\", \"eager\", undefined] as const;\n// Object-fit values that are not valid background-size values\nconst INVALID_BACKGROUND_SIZE_VALUES = [\n  \"-moz-initial\",\n  \"fill\",\n  \"none\",\n  \"scale-down\",\n  undefined,\n];\n\nlet perfObserver: PerformanceObserver | undefined;\nconst allImgs = new Map<\n  string,\n  { src: string; loading: LoadingValue; placeholder: PlaceholderValue }\n>();\n\nexport function getImgProps(\n  props: ImageProps,\n  { imgConf, blurComplete, showAltText }: GetImgPropsOptions,\n): ImgPropsResult {\n  const merged = mergeProps(\n    {\n      // loader: defaultLoader,\n      fill: false,\n      priority: false,\n      preload: false,\n      placeholder: \"empty\",\n      unoptimized: imgConf.unoptimized,\n      decoding: \"async\",\n    } as const,\n    props,\n  );\n  const [local, others] = splitProps(merged, [\n    \"src\",\n    \"loader\",\n    \"quality\",\n    \"width\",\n    \"height\",\n    \"fill\",\n    \"sizes\",\n    \"priority\",\n    \"placeholder\",\n    \"blurDataURL\",\n    \"unoptimized\",\n    \"overrideSrc\",\n    \"onLoad\",\n    \"onLoadingComplete\",\n    \"layout\",\n    \"style\",\n    \"preload\",\n    \"loading\",\n    \"objectFit\",\n    \"objectPosition\",\n    \"lazyBoundary\",\n    \"lazyRoot\",\n    \"fetchpriority\",\n    \"class\",\n    \"decoding\",\n  ]);\n\n  let config: ImageConfig;\n  const c = imgConf || imageConfigDefault;\n\n  if (\"allSizes\" in c) {\n    config = c as ImageConfig;\n  } else {\n    const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b);\n    const deviceSizes = c.deviceSizes.sort((a, b) => a - b);\n    const qualities = c.qualities?.sort((a, b) => a - b);\n    config = { ...c, allSizes, deviceSizes, qualities };\n  }\n\n  if (typeof defaultLoader === \"undefined\") {\n    throw new Error(\n      \"images.loaderFile detected but the file is missing default export.\\nRead more: https://nextjs.org/docs/messages/invalid-images-config\",\n    );\n  }\n\n  let style = local.style;\n  let sizes = local.sizes;\n  let fill = local.fill;\n\n  const loader: ImageLoaderWithConfig = local.loader || defaultLoader;\n\n  if (local.layout) {\n    if (local.layout === \"fill\") {\n      fill = true;\n    }\n    const layoutToStyle: Record<string, Record<string, string> | undefined> = {\n      intrinsic: { maxWidth: \"100%\", height: \"auto\" },\n      responsive: { width: \"100%\", height: \"auto\" },\n    };\n    const layoutToSizes: Record<string, string | undefined> = {\n      responsive: \"100vw\",\n      fill: \"100vw\",\n    };\n    const layoutStyle = layoutToStyle[local.layout];\n    if (layoutStyle) {\n      style = { ...style, ...layoutStyle };\n    }\n    const layoutSizes = layoutToSizes[local.layout];\n    if (layoutSizes && !sizes) {\n      sizes = layoutSizes;\n    }\n  }\n\n  let staticSrc = \"\";\n  let blurDataURL = local.blurDataURL;\n  let widthInt = getInt(local.width);\n  let heightInt = getInt(local.height);\n  let blurWidth: number | undefined;\n  let blurHeight: number | undefined;\n\n  if (isStaticImport(local.src)) {\n    const staticImageData = isStaticRequire(local.src)\n      ? local.src.default\n      : local.src;\n\n    if (!staticImageData.src) {\n      throw new Error(\n        `An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ${JSON.stringify(\n          staticImageData,\n        )}`,\n      );\n    }\n    if (!staticImageData.height || !staticImageData.width) {\n      throw new Error(\n        `An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ${JSON.stringify(\n          staticImageData,\n        )}`,\n      );\n    }\n\n    blurWidth = staticImageData.blurWidth;\n    blurHeight = staticImageData.blurHeight;\n    blurDataURL = blurDataURL || staticImageData.blurDataURL;\n    staticSrc = staticImageData.src;\n\n    if (!fill) {\n      if (!widthInt && !heightInt) {\n        widthInt = staticImageData.width;\n        heightInt = staticImageData.height;\n      } else if (widthInt && !heightInt) {\n        const ratio = widthInt / staticImageData.width;\n        heightInt = Math.round(staticImageData.height * ratio);\n      } else if (!widthInt && heightInt) {\n        const ratio = heightInt / staticImageData.height;\n        widthInt = Math.round(staticImageData.width * ratio);\n      }\n    }\n  }\n  const src = typeof local.src === \"string\" ? local.src : staticSrc;\n\n  let unoptimized = local.unoptimized;\n  let isLazy =\n    !local.priority &&\n    !local.preload &&\n    (local.loading === \"lazy\" || typeof local.loading === \"undefined\");\n  if (!src || src.startsWith(\"data:\") || src.startsWith(\"blob:\")) {\n    // https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs\n    unoptimized = true;\n    isLazy = false;\n  }\n  if (config.unoptimized) {\n    unoptimized = true;\n  }\n  if (!config.dangerouslyAllowSVG && src.split(\"?\", 1)[0].endsWith(\".svg\")) {\n    // Special case to make svg serve as-is to avoid proxying\n    // through the built-in Image Optimization API.\n    unoptimized = true;\n  }\n\n  const qualityInt = getInt(local.quality);\n\n  if (!import.meta.env.PROD) {\n    if (config.output === \"export\" && !unoptimized) {\n      throw new Error(\n        `Image Optimization using the default loader is not compatible with \\`{ output: 'export' }\\`.\n    Possible solutions:\n      - Remove \\`{ output: 'export' }\\` and run \"next start\" to run server mode including the Image Optimization API.\n      - Configure \\`{ images: { unoptimized: true } }\\` in \\`next.config.js\\` to disable the Image Optimization API.\n    Read more: https://nextjs.org/docs/messages/export-image-api`,\n      );\n    }\n    if (!src) {\n      // React doesn't show the stack trace and there's\n      // no `src` to help identify which image, so we\n      // instead console.error(ref) during mount.\n      unoptimized = true;\n    } else {\n      if (fill) {\n        if (local.width) {\n          throw new Error(\n            `Image with src \"${src}\" has both \"width\" and \"fill\" properties. Only one should be used.`,\n          );\n        }\n        if (local.height) {\n          throw new Error(\n            `Image with src \"${src}\" has both \"height\" and \"fill\" properties. Only one should be used.`,\n          );\n        }\n        if (style?.position && style.position !== \"absolute\") {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.position\" properties. Images with \"fill\" always use position absolute - it cannot be modified.`,\n          );\n        }\n        if (style?.width && style.width !== \"100%\") {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.width\" properties. Images with \"fill\" always use width 100% - it cannot be modified.`,\n          );\n        }\n        if (style?.height && style.height !== \"100%\") {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.height\" properties. Images with \"fill\" always use height 100% - it cannot be modified.`,\n          );\n        }\n      } else {\n        if (typeof widthInt === \"undefined\") {\n          throw new Error(\n            `Image with src \"${src}\" is missing required \"width\" property.`,\n          );\n        } else if (Number.isNaN(widthInt)) {\n          throw new Error(\n            `Image with src \"${src}\" has invalid \"width\" property. Expected a numeric value in pixels but received \"${local.width}\".`,\n          );\n        }\n        if (typeof heightInt === \"undefined\") {\n          throw new Error(\n            `Image with src \"${src}\" is missing required \"height\" property.`,\n          );\n        } else if (Number.isNaN(heightInt)) {\n          throw new Error(\n            `Image with src \"${src}\" has invalid \"height\" property. Expected a numeric value in pixels but received \"${local.height}\".`,\n          );\n        }\n\n        // biome-ignore lint/suspicious/noControlCharactersInRegex: no-control-regex\n        if (/^[\\x00-\\x20]/.test(src)) {\n          throw new Error(\n            `Image with src \"${src}\" cannot start with a space or control character. Use src.trimStart() to remove it or encodeURIComponent(src) to keep it.`,\n          );\n        }\n        // biome-ignore lint/suspicious/noControlCharactersInRegex: no-control-regex\n        if (/[\\x00-\\x20]$/.test(src)) {\n          throw new Error(\n            `Image with src \"${src}\" cannot end with a space or control character. Use src.trimEnd() to remove it or encodeURIComponent(src) to keep it.`,\n          );\n        }\n      }\n    }\n    if (!VALID_LOADING_VALUES.includes(local.loading)) {\n      throw new Error(\n        `Image with src \"${src}\" has invalid \"loading\" property. Provided \"${local.loading}\" should be one of ${VALID_LOADING_VALUES.map(\n          String,\n        ).join(\",\")}.`,\n      );\n    }\n    if (local.priority && local.loading === \"lazy\") {\n      throw new Error(\n        `Image with src \"${src}\" has both \"priority\" and \"loading='lazy'\" properties. Only one should be used.`,\n      );\n    }\n    if (local.preload && local.loading === \"lazy\") {\n      throw new Error(\n        `Image with src \"${src}\" has both \"preload\" and \"loading='lazy'\" properties. Only one should be used.`,\n      );\n    }\n    if (local.preload && local.priority) {\n      throw new Error(\n        `Image with src \"${src}\" has both \"preload\" and \"priority\" properties. Only \"preload\" should be used.`,\n      );\n    }\n    if (\n      local.placeholder !== \"empty\" &&\n      local.placeholder !== \"blur\" &&\n      !local.placeholder.startsWith(\"data:image/\")\n    ) {\n      throw new Error(\n        `Image with src \"${src}\" has invalid \"placeholder\" property \"${local.placeholder}\".`,\n      );\n    }\n    if (local.placeholder !== \"empty\") {\n      if (widthInt && heightInt && widthInt * heightInt < 1600) {\n        warnOnce(\n          `Image with src \"${src}\" is smaller than 40x40. Consider removing the \"placeholder\" property to improve performance.`,\n        );\n      }\n    }\n    if (\n      qualityInt &&\n      config.qualities &&\n      !config.qualities.includes(qualityInt)\n    ) {\n      warnOnce(\n        `Image with src \"${src}\" is using quality \"${qualityInt}\" which is not configured in images.qualities [${config.qualities.join(\", \")}]. Please update your config to [${[...config.qualities, qualityInt].sort().join(\", \")}].` +\n          `\\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-qualities`,\n      );\n    }\n    if (local.placeholder === \"blur\" && !blurDataURL) {\n      const VALID_BLUR_EXT = [\"jpeg\", \"png\", \"webp\", \"avif\"]; // should match next-image-loader\n\n      throw new Error(\n        `Image with src \"${src}\" has \"placeholder='blur'\" property but is missing the \"blurDataURL\" property.\n          Possible solutions:\n            - Add a \"blurDataURL\" property, the contents should be a small Data URL to represent the image\n            - Change the \"src\" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(\n              \",\",\n            )} (animated images not supported)\n            - Remove the \"placeholder\" property, effectively no blur effect\n          Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url`,\n      );\n    }\n    if (\"ref\" in others) {\n      warnOnce(\n        `Image with src \"${src}\" is using unsupported \"ref\" property. Consider using the \"onLoad\" property instead.`,\n      );\n    }\n\n    if (!unoptimized) {\n      const urlStr = loader({\n        config,\n        src,\n        width: widthInt || 400,\n        quality: qualityInt || 75,\n      });\n      let url: URL | undefined;\n      try {\n        url = new URL(urlStr);\n      } catch (err) {\n        console.error(err);\n      }\n      if (urlStr === src || (url && url.pathname === src && !url.search)) {\n        warnOnce(\n          `Image with src \"${src}\" has a \"loader\" property that does not implement width. Please implement it or use the \"unoptimized\" property instead.` +\n            `\\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`,\n        );\n      }\n    }\n\n    if (local.onLoadingComplete) {\n      warnOnce(\n        `Image with src \"${src}\" is using deprecated \"onLoadingComplete\" property. Please use the \"onLoad\" property instead.`,\n      );\n    }\n\n    for (const [legacyKey, legacyValue] of Object.entries({\n      layout: local.layout,\n      objectFit: local.objectFit,\n      objectPosition: local.objectPosition,\n      lazyBoundary: local.lazyBoundary,\n      lazyRoot: local.lazyRoot,\n    })) {\n      if (legacyValue) {\n        warnOnce(\n          `Image with src \"${src}\" has legacy prop \"${legacyKey}\". Did you forget to run the codemod?` +\n            `\\nRead more: https://nextjs.org/docs/messages/next-image-upgrade-to-13`,\n        );\n      }\n    }\n\n    if (\n      typeof window !== \"undefined\" &&\n      !perfObserver &&\n      window.PerformanceObserver\n    ) {\n      perfObserver = new PerformanceObserver((entryList) => {\n        for (const entry of entryList.getEntries()) {\n          // @ts-expect-error - missing \"LargestContentfulPaint\" class with \"element\" prop\n          const imgSrc = entry?.element?.src || \"\";\n          const lcpImage = allImgs.get(imgSrc);\n          if (\n            lcpImage &&\n            lcpImage.loading === \"lazy\" &&\n            lcpImage.placeholder === \"empty\" &&\n            !lcpImage.src.startsWith(\"data:\") &&\n            !lcpImage.src.startsWith(\"blob:\")\n          ) {\n            // https://web.dev/lcp/#measure-lcp-in-javascript\n            warnOnce(\n              `Image with src \"${lcpImage.src}\" was detected as the Largest Contentful Paint (LCP). Please add the \\`loading=\"eager\"\\` property if this image is above the fold.` +\n                `\\nRead more: https://nextjs.org/docs/app/api-reference/components/image#loading`,\n            );\n          }\n        }\n      });\n      try {\n        perfObserver.observe({\n          type: \"largest-contentful-paint\",\n          buffered: true,\n        });\n      } catch (err) {\n        // Log error but don't crash the app\n        console.error(err);\n      }\n    }\n  }\n\n  const imgStyle = Object.assign(\n    fill\n      ? {\n          position: \"absolute\",\n          height: \"100%\",\n          width: \"100%\",\n          left: 0,\n          top: 0,\n          right: 0,\n          bottom: 0,\n          objectFit: local.objectFit,\n          objectPosition: local.objectPosition,\n        }\n      : {},\n    showAltText ? {} : { color: \"transparent\" },\n    style,\n  );\n\n  const backgroundImage =\n    !blurComplete && local.placeholder !== \"empty\"\n      ? local.placeholder === \"blur\"\n        ? `url(\"data:image/svg+xml;charset=utf-8,${getImageBlurSvg({\n            widthInt,\n            heightInt,\n            blurWidth,\n            blurHeight,\n            blurDataURL: blurDataURL || \"\", // assume not undefined\n            objectFit: imgStyle.objectFit,\n          })}\")`\n        : `url(\"${local.placeholder}\")` // assume `data:image/`\n      : null;\n\n  const backgroundSize = !INVALID_BACKGROUND_SIZE_VALUES.includes(\n    imgStyle.objectFit,\n  )\n    ? imgStyle.objectFit\n    : imgStyle.objectFit === \"fill\"\n      ? \"100% 100%\" // the background-size equivalent of `fill`\n      : \"cover\";\n\n  const placeholderStyle: PlaceholderStyle = backgroundImage\n    ? {\n        \"background-size\": backgroundSize,\n        \"background-position\": imgStyle.objectPosition || \"50% 50%\",\n        \"background-repeat\": \"no-repeat\",\n        \"background-image\": backgroundImage,\n      }\n    : {};\n\n  if (import.meta.env.DEV) {\n    if (\n      placeholderStyle[\"background-image\"] &&\n      local.placeholder === \"blur\" &&\n      blurDataURL?.startsWith(\"/\")\n    ) {\n      // During `next dev`, we don't want to generate blur placeholders with webpack\n      // because it can delay starting the dev server. Instead, `next-image-loader.js`\n      // will inline a special url to lazily generate the blur placeholder at request time.\n      placeholderStyle[\"background-image\"] = `url(\"${blurDataURL}\")`;\n    }\n  }\n\n  const imgAttributes = generateImgAttrs({\n    config,\n    src,\n    unoptimized,\n    width: widthInt,\n    quality: qualityInt,\n    sizes,\n    loader,\n  });\n\n  const loadingFinal = isLazy ? \"lazy\" : local.loading;\n\n  if (!import.meta.env.PROD) {\n    if (typeof window !== \"undefined\") {\n      let fullUrl: URL;\n      try {\n        fullUrl = new URL(imgAttributes.src);\n      } catch (e) {\n        console.error(e);\n        fullUrl = new URL(imgAttributes.src, window.location.href);\n      }\n      allImgs.set(fullUrl.href, {\n        src,\n        loading: loadingFinal,\n        placeholder: local.placeholder,\n      });\n    }\n  }\n\n  const newProps: ImgProps = {\n    ...others,\n    loading: loadingFinal,\n    fetchpriority: local.fetchpriority,\n    width: widthInt,\n    height: heightInt,\n    decoding: local.decoding,\n    class: local.class,\n    style: { ...imgStyle, ...placeholderStyle },\n    sizes: imgAttributes.sizes,\n    srcSet: imgAttributes.srcSet,\n    src: local.overrideSrc || imgAttributes.src,\n  };\n  const meta = {\n    unoptimized,\n    preload: local.preload || local.priority,\n    placeholder: local.placeholder,\n    fill,\n  };\n  return { props: newProps, meta };\n}\n\nfunction defaultLoader({ src, width, quality }: ImageLoaderProps): string {\n  if (import.meta.env.DEV) {\n    const missingValues: string[] = [];\n    if (!src) missingValues.push(\"src\");\n    if (!width) missingValues.push(\"width\");\n    if (missingValues.length > 0) {\n      throw new Error(\n        `[defaultLoader] 缺少必要属性：${missingValues.join(\", \")}。` +\n          `请确认调用方式正确，或提供自定义 loader。`,\n      );\n    }\n  }\n\n  // 如果 src 本身已是带参数的 URL（外部图片），直接返回\n  if (src.startsWith(\"http://\") || src.startsWith(\"https://\")) {\n    return src;\n  }\n\n  // 本地图片：追加 w / q 参数（供自定义服务器处理）\n  const params = new URLSearchParams();\n  params.set(\"url\", src);\n  params.set(\"w\", String(width));\n  if (quality) params.set(\"q\", String(quality));\n  return `/_image?${params.toString()}`;\n}\n\nfunction getInt(x: unknown): number | undefined {\n  if (typeof x === \"undefined\") {\n    return x;\n  }\n  if (typeof x === \"number\") {\n    return Number.isFinite(x) ? x : NaN;\n  }\n  if (typeof x === \"string\" && /^[0-9]+$/.test(x)) {\n    return parseInt(x, 10);\n  }\n  return NaN;\n}\n\nfunction isStaticRequire(\n  src: StaticRequire | StaticImageData,\n): src is StaticRequire {\n  return (src as StaticRequire).default !== undefined;\n}\n\nfunction isStaticImageData(\n  src: StaticRequire | StaticImageData,\n): src is StaticImageData {\n  return (src as StaticImageData).src !== undefined;\n}\n\nfunction isStaticImport(src: string | StaticImport): src is StaticImport {\n  return (\n    !!src &&\n    typeof src === \"object\" &&\n    (isStaticRequire(src as StaticImport) ||\n      isStaticImageData(src as StaticImport))\n  );\n}\n\nfunction getImageBlurSvg({\n  widthInt,\n  heightInt,\n  blurWidth,\n  blurHeight,\n  blurDataURL,\n  objectFit,\n}: {\n  widthInt?: number;\n  heightInt?: number;\n  blurWidth?: number;\n  blurHeight?: number;\n  blurDataURL: string;\n  objectFit?: string;\n}): string {\n  const std = 20;\n  const svgWidth = blurWidth ? blurWidth * 40 : widthInt;\n  const svgHeight = blurHeight ? blurHeight * 40 : heightInt;\n\n  const viewBox =\n    svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : \"\";\n  const preserveAspectRatio = viewBox\n    ? \"none\"\n    : objectFit === \"contain\"\n      ? \"xMidYMid\"\n      : objectFit === \"cover\"\n        ? \"xMidYMid slice\"\n        : \"none\";\n\n  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`;\n}\n\ntype GenImgAttrsData = {\n  config: ImageConfig;\n  src: string;\n  unoptimized: boolean;\n  loader: ImageLoaderWithConfig;\n  width?: number;\n  quality?: number;\n  sizes?: string;\n};\n\ntype GenImgAttrsResult = {\n  src: string;\n  srcSet: string | undefined;\n  sizes: string | undefined;\n};\n\nfunction generateImgAttrs({\n  config,\n  src,\n  unoptimized,\n  width,\n  quality,\n  sizes,\n  loader,\n}: GenImgAttrsData): GenImgAttrsResult {\n  if (unoptimized) {\n    return { src, srcSet: undefined, sizes: undefined };\n  }\n\n  const { widths, kind } = getWidths(config, width, sizes);\n  const last = widths.length - 1;\n\n  return {\n    sizes: !sizes && kind === \"w\" ? \"100vw\" : sizes,\n    srcSet: widths\n      .map(\n        (w, i) =>\n          `${loader({ config, src, quality, width: w })} ${\n            kind === \"w\" ? w : i + 1\n          }${kind}`,\n      )\n      .join(\", \"),\n\n    // It's intended to keep `src` the last attribute because React updates\n    // attributes in order. If we keep `src` the first one, Safari will\n    // immediately start to fetch `src`, before `sizes` and `srcSet` are even\n    // updated by React. That causes multiple unnecessary requests if `srcSet`\n    // and `sizes` are defined.\n    // This bug cannot be reproduced in Chrome or Firefox.\n    src: loader({ config, src, quality, width: widths[last] }),\n  };\n}\n\nfunction getWidths(\n  { deviceSizes, allSizes }: ImageConfig,\n  width: number | undefined,\n  sizes: string | undefined,\n): { widths: number[]; kind: \"w\" | \"x\" } {\n  if (sizes) {\n    // Find all the \"vw\" percent sizes used in the sizes prop\n    const viewportWidthRe = /(^|\\s)(1?\\d?\\d)vw/g;\n    const percentSizes = [];\n    for (\n      let match: RegExpExecArray | null;\n      // biome-ignore lint/suspicious/noAssignInExpressions: nextjs code\n      (match = viewportWidthRe.exec(sizes));\n      match\n    ) {\n      percentSizes.push(Number.parseInt(match[2], 10));\n    }\n    if (percentSizes.length) {\n      const smallestRatio = Math.min(...percentSizes) * 0.01;\n      return {\n        widths: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),\n        kind: \"w\",\n      };\n    }\n    return { widths: allSizes, kind: \"w\" };\n  }\n  if (typeof width !== \"number\") {\n    return { widths: deviceSizes, kind: \"w\" };\n  }\n\n  const widths = [\n    ...new Set(\n      // > This means that most OLED screens that say they are 3x resolution,\n      // > are actually 3x in the green color, but only 1.5x in the red and\n      // > blue colors. Showing a 3x resolution image in the app vs a 2x\n      // > resolution image will be visually the same, though the 3x image\n      // > takes significantly more data. Even true 3x resolution screens are\n      // > wasteful as the human eye cannot see that level of detail without\n      // > something like a magnifying glass.\n      // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html\n      [width, width * 2 /*, width * 3*/].map(\n        (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1],\n      ),\n    ),\n  ];\n  return { widths, kind: \"x\" };\n}\n"],"mappings":"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"}
+{"version":3,"file":"Image.utils.js","names":[],"sources":["../../../src/components/image/Image.utils.ts"],"sourcesContent":["/**\n * handle-loading.ts\n * 单一职责：封装图片加载完成后的所有副作用——decode、回调触发、开发环境警告。\n * 纯 TypeScript，不包含任何 JSX 或组件代码。\n */\n\nimport { mergeProps, splitProps } from \"solid-js\";\nimport { warnOnce } from \"~/utils\";\nimport { imageConfigDefault } from \"./Image.config\";\nimport type {\n  ImageConfig,\n  ImageConfigComplete,\n  ImageLoaderProps,\n  ImageLoaderWithConfig,\n  ImageProps,\n  ImgProps,\n  ImgPropsResult,\n  LoadingValue,\n  OnLoad,\n  OnLoadingComplete,\n  PlaceholderStyle,\n  PlaceholderValue,\n  StaticImageData,\n  StaticImport,\n  StaticRequire,\n} from \"./Image.types\";\n\n// ─── 类型补充 ─────────────────────────────────────────────────────────────────\n\n/** 用于追踪每个 img 节点已处理的 src，避免重复触发 */\ntype ImgWithDataProp = HTMLImageElement & { \"data-loaded-src\"?: string };\n\n// ─── 主函数 ───────────────────────────────────────────────────────────────────\n\n/**\n * 在图片加载/hydrate 后调用。\n * - 使用 img.decode() 确保像素已解码再触发回调\n * - 清除 blur placeholder\n * - 开发环境下输出 fill / sizes 相关警告\n */\nexport function handleLoading(\n  img: ImgWithDataProp,\n  placeholder: PlaceholderValue,\n  onLoad: OnLoad | undefined,\n  onLoadingComplete: OnLoadingComplete | undefined,\n  setBlurComplete: (v: boolean) => void,\n  unoptimized: boolean,\n  sizesInput: string | undefined,\n): void {\n  const src = img?.src;\n  // 同一张图只处理一次\n  if (!img || img[\"data-loaded-src\"] === src) return;\n  img[\"data-loaded-src\"] = src;\n\n  const p: Promise<void> = \"decode\" in img ? img.decode() : Promise.resolve();\n\n  p.catch(() => {}).then(() => {\n    // 若组件已卸载则提前退出\n    if (!img.parentElement || !img.isConnected) return;\n\n    if (placeholder !== \"empty\") {\n      setBlurComplete(true);\n    }\n\n    if (onLoad) {\n      const event = new Event(\"load\");\n      Object.defineProperty(event, \"target\", { writable: false, value: img });\n      onLoad(\n        event as Event & { currentTarget: HTMLImageElement; target: Element },\n      );\n    }\n\n    if (onLoadingComplete) {\n      onLoadingComplete(img);\n    }\n\n    if (import.meta.env.DEV) {\n      warnFillUsage(img, unoptimized, sizesInput);\n      warnAspectRatioMismatch(img);\n    }\n  });\n}\n\n// ─── 开发警告辅助 ──────────────────────────────────────────────────────────────\n\nfunction warnFillUsage(\n  img: HTMLImageElement,\n  unoptimized: boolean,\n  sizesInput: string | undefined,\n): void {\n  if (img.getAttribute(\"data-nimg\") !== \"fill\") return;\n\n  const origSrc =\n    new URL(img.src, \"http://n\").searchParams.get(\"url\") || img.src;\n\n  if (!unoptimized) {\n    const widthViewportRatio =\n      img.getBoundingClientRect().width / window.innerWidth;\n    if (widthViewportRatio < 0.6) {\n      if (sizesInput === \"100vw\") {\n        console.warn(\n          `[Image] src=\"${origSrc}\" 设置了 fill 和 sizes=\"100vw\"，但实际渲染宽度不足视口宽度，请调整 sizes 以提升性能。`,\n        );\n      } else if (!sizesInput) {\n        console.warn(\n          `[Image] src=\"${origSrc}\" 设置了 fill 但缺少 sizes 属性，请添加以提升性能。`,\n        );\n      }\n    }\n  }\n\n  if (img.parentElement) {\n    const { position } = window.getComputedStyle(img.parentElement);\n    const valid = [\"absolute\", \"fixed\", \"relative\"];\n    if (!valid.includes(position)) {\n      console.warn(\n        `[Image] src=\"${origSrc}\" 设置了 fill，但父元素 position=\"${position}\"，应为 ${valid.join(\" | \")} 之一。`,\n      );\n    }\n  }\n\n  if (img.height === 0) {\n    console.warn(\n      `[Image] src=\"${origSrc}\" 设置了 fill 且高度为 0，请为父元素设置明确高度。`,\n    );\n  }\n}\n\nfunction warnAspectRatioMismatch(img: HTMLImageElement): void {\n  const heightModified = img.height.toString() !== img.getAttribute(\"height\");\n  const widthModified = img.width.toString() !== img.getAttribute(\"width\");\n  if (\n    (heightModified && !widthModified) ||\n    (!heightModified && widthModified)\n  ) {\n    const origSrc =\n      new URL(img.src, \"http://n\").searchParams.get(\"url\") || img.src;\n    console.warn(\n      `[Image] src=\"${origSrc}\" 仅修改了 width 或 height 其中之一，请同时添加 width: \"auto\" 或 height: \"auto\" 样式以保持宽高比。`,\n    );\n  }\n}\n\ninterface GetImgPropsOptions {\n  imgConf: ImageConfigComplete;\n  blurComplete: boolean;\n  showAltText: boolean;\n}\n\nexport const VALID_LOADING_VALUES = [\"lazy\", \"eager\", undefined] as const;\n// Object-fit values that are not valid background-size values\nconst INVALID_BACKGROUND_SIZE_VALUES = [\n  \"-moz-initial\",\n  \"fill\",\n  \"none\",\n  \"scale-down\",\n  undefined,\n];\n\nlet perfObserver: PerformanceObserver | undefined;\nconst allImgs = new Map<\n  string,\n  { src: string; loading: LoadingValue; placeholder: PlaceholderValue }\n>();\n\nexport function getImgProps(\n  props: ImageProps,\n  { imgConf, blurComplete, showAltText }: GetImgPropsOptions,\n): ImgPropsResult {\n  const merged = mergeProps(\n    {\n      // loader: defaultLoader,\n      fill: false,\n      priority: false,\n      preload: false,\n      placeholder: \"empty\",\n      unoptimized: imgConf.unoptimized,\n      decoding: \"async\",\n    } as const,\n    props,\n  );\n  const [local, others] = splitProps(merged, [\n    \"src\",\n    \"loader\",\n    \"quality\",\n    \"width\",\n    \"height\",\n    \"fill\",\n    \"sizes\",\n    \"priority\",\n    \"placeholder\",\n    \"blurDataURL\",\n    \"unoptimized\",\n    \"overrideSrc\",\n    \"onLoad\",\n    \"onLoadingComplete\",\n    \"layout\",\n    \"style\",\n    \"preload\",\n    \"loading\",\n    \"objectFit\",\n    \"objectPosition\",\n    \"lazyBoundary\",\n    \"lazyRoot\",\n    \"fetchpriority\",\n    \"class\",\n    \"decoding\",\n  ]);\n\n  let config: ImageConfig;\n  const c = imgConf || imageConfigDefault;\n\n  if (\"allSizes\" in c) {\n    config = c as ImageConfig;\n  } else {\n    const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b);\n    const deviceSizes = c.deviceSizes.sort((a, b) => a - b);\n    const qualities = c.qualities?.sort((a, b) => a - b);\n    config = { ...c, allSizes, deviceSizes, qualities };\n  }\n\n  if (typeof defaultLoader === \"undefined\") {\n    throw new Error(\n      \"images.loaderFile detected but the file is missing default export.\\nRead more: https://nextjs.org/docs/messages/invalid-images-config\",\n    );\n  }\n\n  let style = local.style;\n  let sizes = local.sizes;\n  let fill = local.fill;\n\n  const loader: ImageLoaderWithConfig = local.loader || defaultLoader;\n\n  if (local.layout) {\n    if (local.layout === \"fill\") {\n      fill = true;\n    }\n    const layoutToStyle: Record<string, Record<string, string> | undefined> = {\n      intrinsic: { maxWidth: \"100%\", height: \"auto\" },\n      responsive: { width: \"100%\", height: \"auto\" },\n    };\n    const layoutToSizes: Record<string, string | undefined> = {\n      responsive: \"100vw\",\n      fill: \"100vw\",\n    };\n    const layoutStyle = layoutToStyle[local.layout];\n    if (layoutStyle) {\n      style = { ...style, ...layoutStyle };\n    }\n    const layoutSizes = layoutToSizes[local.layout];\n    if (layoutSizes && !sizes) {\n      sizes = layoutSizes;\n    }\n  }\n\n  let staticSrc = \"\";\n  let blurDataURL = local.blurDataURL;\n  let widthInt = getInt(local.width);\n  let heightInt = getInt(local.height);\n  let blurWidth: number | undefined;\n  let blurHeight: number | undefined;\n\n  if (isStaticImport(local.src)) {\n    const staticImageData = isStaticRequire(local.src)\n      ? local.src.default\n      : local.src;\n\n    if (!staticImageData.src) {\n      throw new Error(\n        `An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ${JSON.stringify(\n          staticImageData,\n        )}`,\n      );\n    }\n    if (!staticImageData.height || !staticImageData.width) {\n      throw new Error(\n        `An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ${JSON.stringify(\n          staticImageData,\n        )}`,\n      );\n    }\n\n    blurWidth = staticImageData.blurWidth;\n    blurHeight = staticImageData.blurHeight;\n    blurDataURL = blurDataURL || staticImageData.blurDataURL;\n    staticSrc = staticImageData.src;\n\n    if (!fill) {\n      if (!widthInt && !heightInt) {\n        widthInt = staticImageData.width;\n        heightInt = staticImageData.height;\n      } else if (widthInt && !heightInt) {\n        const ratio = widthInt / staticImageData.width;\n        heightInt = Math.round(staticImageData.height * ratio);\n      } else if (!widthInt && heightInt) {\n        const ratio = heightInt / staticImageData.height;\n        widthInt = Math.round(staticImageData.width * ratio);\n      }\n    }\n  }\n  const src = typeof local.src === \"string\" ? local.src : staticSrc;\n\n  let unoptimized = local.unoptimized;\n  let isLazy =\n    !local.priority &&\n    !local.preload &&\n    (local.loading === \"lazy\" || typeof local.loading === \"undefined\");\n  if (!src || src.startsWith(\"data:\") || src.startsWith(\"blob:\")) {\n    // https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs\n    unoptimized = true;\n    isLazy = false;\n  }\n  if (config.unoptimized) {\n    unoptimized = true;\n  }\n  if (!config.dangerouslyAllowSVG && src.split(\"?\", 1)[0].endsWith(\".svg\")) {\n    // Special case to make svg serve as-is to avoid proxying\n    // through the built-in Image Optimization API.\n    unoptimized = true;\n  }\n\n  const qualityInt = getInt(local.quality);\n\n  if (!import.meta.env.PROD) {\n    if (config.output === \"export\" && !unoptimized) {\n      throw new Error(\n        `Image Optimization using the default loader is not compatible with \\`{ output: 'export' }\\`.\n    Possible solutions:\n      - Remove \\`{ output: 'export' }\\` and run \"next start\" to run server mode including the Image Optimization API.\n      - Configure \\`{ images: { unoptimized: true } }\\` in \\`next.config.js\\` to disable the Image Optimization API.\n    Read more: https://nextjs.org/docs/messages/export-image-api`,\n      );\n    }\n    if (!src) {\n      // React doesn't show the stack trace and there's\n      // no `src` to help identify which image, so we\n      // instead console.error(ref) during mount.\n      unoptimized = true;\n    } else {\n      if (fill) {\n        if (local.width) {\n          throw new Error(\n            `Image with src \"${src}\" has both \"width\" and \"fill\" properties. Only one should be used.`,\n          );\n        }\n        if (local.height) {\n          throw new Error(\n            `Image with src \"${src}\" has both \"height\" and \"fill\" properties. Only one should be used.`,\n          );\n        }\n        if (style?.position && style.position !== \"absolute\") {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.position\" properties. Images with \"fill\" always use position absolute - it cannot be modified.`,\n          );\n        }\n        if (style?.width && style.width !== \"100%\") {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.width\" properties. Images with \"fill\" always use width 100% - it cannot be modified.`,\n          );\n        }\n        if (style?.height && style.height !== \"100%\") {\n          throw new Error(\n            `Image with src \"${src}\" has both \"fill\" and \"style.height\" properties. Images with \"fill\" always use height 100% - it cannot be modified.`,\n          );\n        }\n      } else {\n        if (typeof widthInt === \"undefined\") {\n          throw new Error(\n            `Image with src \"${src}\" is missing required \"width\" property.`,\n          );\n        } else if (Number.isNaN(widthInt)) {\n          throw new Error(\n            `Image with src \"${src}\" has invalid \"width\" property. Expected a numeric value in pixels but received \"${local.width}\".`,\n          );\n        }\n        if (typeof heightInt === \"undefined\") {\n          throw new Error(\n            `Image with src \"${src}\" is missing required \"height\" property.`,\n          );\n        } else if (Number.isNaN(heightInt)) {\n          throw new Error(\n            `Image with src \"${src}\" has invalid \"height\" property. Expected a numeric value in pixels but received \"${local.height}\".`,\n          );\n        }\n\n        // biome-ignore lint/suspicious/noControlCharactersInRegex: no-control-regex\n        if (/^[\\x00-\\x20]/.test(src)) {\n          throw new Error(\n            `Image with src \"${src}\" cannot start with a space or control character. Use src.trimStart() to remove it or encodeURIComponent(src) to keep it.`,\n          );\n        }\n        // biome-ignore lint/suspicious/noControlCharactersInRegex: no-control-regex\n        if (/[\\x00-\\x20]$/.test(src)) {\n          throw new Error(\n            `Image with src \"${src}\" cannot end with a space or control character. Use src.trimEnd() to remove it or encodeURIComponent(src) to keep it.`,\n          );\n        }\n      }\n    }\n    if (!VALID_LOADING_VALUES.includes(local.loading)) {\n      throw new Error(\n        `Image with src \"${src}\" has invalid \"loading\" property. Provided \"${local.loading}\" should be one of ${VALID_LOADING_VALUES.map(\n          String,\n        ).join(\",\")}.`,\n      );\n    }\n    if (local.priority && local.loading === \"lazy\") {\n      throw new Error(\n        `Image with src \"${src}\" has both \"priority\" and \"loading='lazy'\" properties. Only one should be used.`,\n      );\n    }\n    if (local.preload && local.loading === \"lazy\") {\n      throw new Error(\n        `Image with src \"${src}\" has both \"preload\" and \"loading='lazy'\" properties. Only one should be used.`,\n      );\n    }\n    if (local.preload && local.priority) {\n      throw new Error(\n        `Image with src \"${src}\" has both \"preload\" and \"priority\" properties. Only \"preload\" should be used.`,\n      );\n    }\n    if (\n      local.placeholder !== \"empty\" &&\n      local.placeholder !== \"blur\" &&\n      !local.placeholder.startsWith(\"data:image/\")\n    ) {\n      throw new Error(\n        `Image with src \"${src}\" has invalid \"placeholder\" property \"${local.placeholder}\".`,\n      );\n    }\n    if (local.placeholder !== \"empty\") {\n      if (widthInt && heightInt && widthInt * heightInt < 1600) {\n        warnOnce(\n          `Image with src \"${src}\" is smaller than 40x40. Consider removing the \"placeholder\" property to improve performance.`,\n        );\n      }\n    }\n    if (\n      qualityInt &&\n      config.qualities &&\n      !config.qualities.includes(qualityInt)\n    ) {\n      warnOnce(\n        `Image with src \"${src}\" is using quality \"${qualityInt}\" which is not configured in images.qualities [${config.qualities.join(\", \")}]. Please update your config to [${[...config.qualities, qualityInt].sort().join(\", \")}].` +\n          `\\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-qualities`,\n      );\n    }\n    if (local.placeholder === \"blur\" && !blurDataURL) {\n      const VALID_BLUR_EXT = [\"jpeg\", \"png\", \"webp\", \"avif\"]; // should match next-image-loader\n\n      throw new Error(\n        `Image with src \"${src}\" has \"placeholder='blur'\" property but is missing the \"blurDataURL\" property.\n          Possible solutions:\n            - Add a \"blurDataURL\" property, the contents should be a small Data URL to represent the image\n            - Change the \"src\" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(\n              \",\",\n            )} (animated images not supported)\n            - Remove the \"placeholder\" property, effectively no blur effect\n          Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url`,\n      );\n    }\n    if (\"ref\" in others) {\n      warnOnce(\n        `Image with src \"${src}\" is using unsupported \"ref\" property. Consider using the \"onLoad\" property instead.`,\n      );\n    }\n\n    if (!unoptimized) {\n      const urlStr = loader({\n        config,\n        src,\n        width: widthInt || 400,\n        quality: qualityInt || 75,\n      });\n      let url: URL | undefined;\n      try {\n        url = new URL(urlStr);\n      } catch (err) {\n        console.error(err);\n      }\n      if (urlStr === src || (url && url.pathname === src && !url.search)) {\n        warnOnce(\n          `Image with src \"${src}\" has a \"loader\" property that does not implement width. Please implement it or use the \"unoptimized\" property instead.` +\n            `\\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`,\n        );\n      }\n    }\n\n    if (local.onLoadingComplete) {\n      warnOnce(\n        `Image with src \"${src}\" is using deprecated \"onLoadingComplete\" property. Please use the \"onLoad\" property instead.`,\n      );\n    }\n\n    for (const [legacyKey, legacyValue] of Object.entries({\n      layout: local.layout,\n      objectFit: local.objectFit,\n      objectPosition: local.objectPosition,\n      lazyBoundary: local.lazyBoundary,\n      lazyRoot: local.lazyRoot,\n    })) {\n      if (legacyValue) {\n        warnOnce(\n          `Image with src \"${src}\" has legacy prop \"${legacyKey}\". Did you forget to run the codemod?` +\n            `\\nRead more: https://nextjs.org/docs/messages/next-image-upgrade-to-13`,\n        );\n      }\n    }\n\n    if (\n      typeof window !== \"undefined\" &&\n      !perfObserver &&\n      window.PerformanceObserver\n    ) {\n      perfObserver = new PerformanceObserver((entryList) => {\n        for (const entry of entryList.getEntries()) {\n          // @ts-expect-error - missing \"LargestContentfulPaint\" class with \"element\" prop\n          const imgSrc = entry?.element?.src || \"\";\n          const lcpImage = allImgs.get(imgSrc);\n          if (\n            lcpImage &&\n            lcpImage.loading === \"lazy\" &&\n            lcpImage.placeholder === \"empty\" &&\n            !lcpImage.src.startsWith(\"data:\") &&\n            !lcpImage.src.startsWith(\"blob:\")\n          ) {\n            // https://web.dev/lcp/#measure-lcp-in-javascript\n            warnOnce(\n              `Image with src \"${lcpImage.src}\" was detected as the Largest Contentful Paint (LCP). Please add the \\`loading=\"eager\"\\` property if this image is above the fold.` +\n                `\\nRead more: https://nextjs.org/docs/app/api-reference/components/image#loading`,\n            );\n          }\n        }\n      });\n      try {\n        perfObserver.observe({\n          type: \"largest-contentful-paint\",\n          buffered: true,\n        });\n      } catch (err) {\n        // Log error but don't crash the app\n        console.error(err);\n      }\n    }\n  }\n\n  const imgStyle = Object.assign(\n    fill\n      ? {\n          position: \"absolute\",\n          height: \"100%\",\n          width: \"100%\",\n          left: 0,\n          top: 0,\n          right: 0,\n          bottom: 0,\n          objectFit: local.objectFit,\n          objectPosition: local.objectPosition,\n        }\n      : {},\n    showAltText ? {} : { color: \"transparent\" },\n    style,\n  );\n\n  const backgroundImage =\n    !blurComplete && local.placeholder !== \"empty\"\n      ? local.placeholder === \"blur\"\n        ? `url(\"data:image/svg+xml;charset=utf-8,${getImageBlurSvg({\n            widthInt,\n            heightInt,\n            blurWidth,\n            blurHeight,\n            blurDataURL: blurDataURL || \"\", // assume not undefined\n            objectFit: imgStyle.objectFit,\n          })}\")`\n        : `url(\"${local.placeholder}\")` // assume `data:image/`\n      : null;\n\n  const backgroundSize = !INVALID_BACKGROUND_SIZE_VALUES.includes(\n    imgStyle.objectFit,\n  )\n    ? imgStyle.objectFit\n    : imgStyle.objectFit === \"fill\"\n      ? \"100% 100%\" // the background-size equivalent of `fill`\n      : \"cover\";\n\n  const placeholderStyle: PlaceholderStyle = backgroundImage\n    ? {\n        \"background-size\": backgroundSize,\n        \"background-position\": imgStyle.objectPosition || \"50% 50%\",\n        \"background-repeat\": \"no-repeat\",\n        \"background-image\": backgroundImage,\n      }\n    : {};\n\n  if (import.meta.env.DEV) {\n    if (\n      placeholderStyle[\"background-image\"] &&\n      local.placeholder === \"blur\" &&\n      blurDataURL?.startsWith(\"/\")\n    ) {\n      // During `next dev`, we don't want to generate blur placeholders with webpack\n      // because it can delay starting the dev server. Instead, `next-image-loader.js`\n      // will inline a special url to lazily generate the blur placeholder at request time.\n      placeholderStyle[\"background-image\"] = `url(\"${blurDataURL}\")`;\n    }\n  }\n\n  const imgAttributes = generateImgAttrs({\n    config,\n    src,\n    unoptimized,\n    width: widthInt,\n    quality: qualityInt,\n    sizes,\n    loader,\n  });\n\n  const loadingFinal = isLazy ? \"lazy\" : local.loading;\n\n  if (!import.meta.env.PROD) {\n    if (typeof window !== \"undefined\") {\n      let fullUrl: URL;\n      try {\n        fullUrl = new URL(imgAttributes.src);\n      } catch (e) {\n        console.error(e);\n        fullUrl = new URL(imgAttributes.src, window.location.href);\n      }\n      allImgs.set(fullUrl.href, {\n        src,\n        loading: loadingFinal,\n        placeholder: local.placeholder,\n      });\n    }\n  }\n\n  const newProps: ImgProps = {\n    ...others,\n    loading: loadingFinal,\n    fetchpriority: local.fetchpriority,\n    width: widthInt,\n    height: heightInt,\n    decoding: local.decoding,\n    class: local.class,\n    style: { ...imgStyle, ...placeholderStyle },\n    sizes: imgAttributes.sizes,\n    srcSet: imgAttributes.srcSet,\n    src: local.overrideSrc || imgAttributes.src,\n  };\n  const meta = {\n    unoptimized,\n    preload: local.preload || local.priority,\n    placeholder: local.placeholder,\n    fill,\n  };\n  return { props: newProps, meta };\n}\n\nfunction defaultLoader({ src, width, quality }: ImageLoaderProps): string {\n  if (import.meta.env.DEV) {\n    const missingValues: string[] = [];\n    if (!src) missingValues.push(\"src\");\n    if (!width) missingValues.push(\"width\");\n    if (missingValues.length > 0) {\n      throw new Error(\n        `[defaultLoader] 缺少必要属性：${missingValues.join(\", \")}。` +\n          `请确认调用方式正确，或提供自定义 loader。`,\n      );\n    }\n  }\n\n  // 如果 src 本身已是带参数的 URL（外部图片），直接返回\n  if (src.startsWith(\"http://\") || src.startsWith(\"https://\")) {\n    return src;\n  }\n\n  // 本地图片：追加 w / q 参数（供自定义服务器处理）\n  const params = new URLSearchParams();\n  params.set(\"url\", src);\n  params.set(\"w\", String(width));\n  if (quality) params.set(\"q\", String(quality));\n  return `/_image?${params.toString()}`;\n}\n\nfunction getInt(x: unknown): number | undefined {\n  if (typeof x === \"undefined\") {\n    return x;\n  }\n  if (typeof x === \"number\") {\n    return Number.isFinite(x) ? x : NaN;\n  }\n  if (typeof x === \"string\" && /^[0-9]+$/.test(x)) {\n    return parseInt(x, 10);\n  }\n  return NaN;\n}\n\nfunction isStaticRequire(\n  src: StaticRequire | StaticImageData,\n): src is StaticRequire {\n  return (src as StaticRequire).default !== undefined;\n}\n\nfunction isStaticImageData(\n  src: StaticRequire | StaticImageData,\n): src is StaticImageData {\n  return (src as StaticImageData).src !== undefined;\n}\n\nfunction isStaticImport(src: string | StaticImport): src is StaticImport {\n  return (\n    !!src &&\n    typeof src === \"object\" &&\n    (isStaticRequire(src as StaticImport) ||\n      isStaticImageData(src as StaticImport))\n  );\n}\n\nfunction getImageBlurSvg({\n  widthInt,\n  heightInt,\n  blurWidth,\n  blurHeight,\n  blurDataURL,\n  objectFit,\n}: {\n  widthInt?: number;\n  heightInt?: number;\n  blurWidth?: number;\n  blurHeight?: number;\n  blurDataURL: string;\n  objectFit?: string;\n}): string {\n  const std = 20;\n  const svgWidth = blurWidth ? blurWidth * 40 : widthInt;\n  const svgHeight = blurHeight ? blurHeight * 40 : heightInt;\n\n  const viewBox =\n    svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : \"\";\n  const preserveAspectRatio = viewBox\n    ? \"none\"\n    : objectFit === \"contain\"\n      ? \"xMidYMid\"\n      : objectFit === \"cover\"\n        ? \"xMidYMid slice\"\n        : \"none\";\n\n  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`;\n}\n\ntype GenImgAttrsData = {\n  config: ImageConfig;\n  src: string;\n  unoptimized: boolean;\n  loader: ImageLoaderWithConfig;\n  width?: number;\n  quality?: number;\n  sizes?: string;\n};\n\ntype GenImgAttrsResult = {\n  src: string;\n  srcSet: string | undefined;\n  sizes: string | undefined;\n};\n\nfunction generateImgAttrs({\n  config,\n  src,\n  unoptimized,\n  width,\n  quality,\n  sizes,\n  loader,\n}: GenImgAttrsData): GenImgAttrsResult {\n  if (unoptimized) {\n    return { src, srcSet: undefined, sizes: undefined };\n  }\n\n  const { widths, kind } = getWidths(config, width, sizes);\n  const last = widths.length - 1;\n\n  return {\n    sizes: !sizes && kind === \"w\" ? \"100vw\" : sizes,\n    srcSet: widths\n      .map(\n        (w, i) =>\n          `${loader({ config, src, quality, width: w })} ${\n            kind === \"w\" ? w : i + 1\n          }${kind}`,\n      )\n      .join(\", \"),\n\n    // It's intended to keep `src` the last attribute because React updates\n    // attributes in order. If we keep `src` the first one, Safari will\n    // immediately start to fetch `src`, before `sizes` and `srcSet` are even\n    // updated by React. That causes multiple unnecessary requests if `srcSet`\n    // and `sizes` are defined.\n    // This bug cannot be reproduced in Chrome or Firefox.\n    src: loader({ config, src, quality, width: widths[last] }),\n  };\n}\n\nfunction getWidths(\n  { deviceSizes, allSizes }: ImageConfig,\n  width: number | undefined,\n  sizes: string | undefined,\n): { widths: number[]; kind: \"w\" | \"x\" } {\n  if (sizes) {\n    // Find all the \"vw\" percent sizes used in the sizes prop\n    const viewportWidthRe = /(^|\\s)(1?\\d?\\d)vw/g;\n    const percentSizes = [];\n    for (\n      let match: RegExpExecArray | null;\n      // biome-ignore lint/suspicious/noAssignInExpressions: nextjs code\n      (match = viewportWidthRe.exec(sizes));\n      match\n    ) {\n      percentSizes.push(Number.parseInt(match[2], 10));\n    }\n    if (percentSizes.length) {\n      const smallestRatio = Math.min(...percentSizes) * 0.01;\n      return {\n        widths: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),\n        kind: \"w\",\n      };\n    }\n    return { widths: allSizes, kind: \"w\" };\n  }\n  if (typeof width !== \"number\") {\n    return { widths: deviceSizes, kind: \"w\" };\n  }\n\n  const widths = [\n    ...new Set(\n      // > This means that most OLED screens that say they are 3x resolution,\n      // > are actually 3x in the green color, but only 1.5x in the red and\n      // > blue colors. Showing a 3x resolution image in the app vs a 2x\n      // > resolution image will be visually the same, though the 3x image\n      // > takes significantly more data. Even true 3x resolution screens are\n      // > wasteful as the human eye cannot see that level of detail without\n      // > something like a magnifying glass.\n      // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html\n      [width, width * 2 /*, width * 3*/].map(\n        (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1],\n      ),\n    ),\n  ];\n  return { widths, kind: \"x\" };\n}\n"],"mappings":"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"}

package/dist/components/image/ImageElement.js

@@ -2,8 +2,8 @@ import { handleLoading as e } from "./Image.utils.js";
 import { mergeProps as t, spread as n, template as r, use as i } from "solid-js/web";
 import { mergeProps as a, splitProps as o } from "solid-js";
 //#region src/components/image/ImageElement.tsx
-var s = /* @__PURE__ */ r("<img>", !0, !1, !1), c = (r) => {
-	let [c, l] = o(a({ decoding: "async" }, r), [
+var s = /*#__PURE__*/ r("<img>", !0, !1, !1), c = (r) => {
+	let c = a({ decoding: "async" }, r), [l, u] = o(c, [
 		"src",
 		"srcSet",
 		"sizes",
@@ -27,51 +27,51 @@ var s = /* @__PURE__ */ r("<img>", !0, !1, !1), c = (r) => {
 		"ref",
 		"alt"
 	]);
-	function u(t) {
-		t && (c.onError && (t.src = t.src), t.complete && e(t, c.placeholder, c.onLoad, c.onLoadingComplete, c.setBlurComplete, c.unoptimized, c.sizesInput), c.ref?.(t));
+	function d(t) {
+		t && (l.onError && (t.src = t.src), t.complete && e(t, l.placeholder, l.onLoad, l.onLoadingComplete, l.setBlurComplete, l.unoptimized, l.sizesInput), l.ref?.(t));
 	}
 	return (() => {
-		var r = s(), a = u;
-		return typeof a == "function" ? i(a, r) : u = r, n(r, t(l, {
+		var r = s(), a = d;
+		return typeof a == "function" ? i(a, r) : d = r, n(r, t(u, {
 			get alt() {
-				return c.alt;
+				return l.alt;
 			},
 			get loading() {
-				return c.loading;
+				return l.loading;
 			},
 			get width() {
-				return c.width;
+				return l.width;
 			},
 			get height() {
-				return c.height;
+				return l.height;
 			},
 			get decoding() {
-				return c.decoding;
+				return l.decoding;
 			},
 			get "data-nimg"() {
-				return c.fill ? "fill" : "1";
+				return l.fill ? "fill" : "1";
 			},
 			get class() {
-				return c.class;
+				return l.class;
 			},
 			get style() {
-				return c.style;
+				return l.style;
 			},
 			get sizes() {
-				return c.sizes;
+				return l.sizes;
 			},
 			get srcset() {
-				return c.srcSet;
+				return l.srcSet;
 			},
 			get src() {
-				return c.src;
+				return l.src;
 			},
 			onLoad: (t) => {
 				let n = t.currentTarget;
-				e(n, c.placeholder, c.onLoad, c.onLoadingComplete, c.setBlurComplete, c.unoptimized, c.sizesInput);
+				e(n, l.placeholder, l.onLoad, l.onLoadingComplete, l.setBlurComplete, l.unoptimized, l.sizesInput);
 			},
 			onError: (e) => {
-				c.setShowAltText(!0), c.placeholder !== "empty" && c.setBlurComplete(!0), c.onError && typeof c.onError == "function" && c.onError(e);
+				l.setShowAltText(!0), l.placeholder !== "empty" && l.setBlurComplete(!0), l.onError && typeof l.onError == "function" && l.onError(e);
 			}
 		}), !1, !1), r;
 	})();

package/dist/components/image/ImageElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageElement.js","names":["Component","mergeProps","splitProps","ImgProps","OnLoad","OnLoadingComplete","PlaceholderValue","handleLoading","ImageElementProps","unoptimized","placeholder","setBlurComplete","v","setShowAltText","sizesInput","onLoad","onLoadingComplete","ref","el","HTMLImageElement","ImageElement","rawProps","props","decoding","const","internal","imgAttrs","handleRef","img","onError","src","import","meta","env","PROD","console","error","getAttribute","alt","undefined","complete","_el$","_tmpl$","_ref$","_$use","_$spread","_$mergeProps","loading","width","height","data-nimg","fill","class","style","sizes","srcset","srcSet","e","currentTarget"],"sources":["../../../src/components/image/ImageElement.tsx"],"sourcesContent":["/**\n * ImageElement.tsx\n * 单一职责：仅负责渲染原生 <img> 元素，并将 ref 回调、onLoad、onError 事件桥接到\n * 上层传入的副作用函数。不包含配置解析、preload 或 blur placeholder 逻辑。\n */\n\nimport { type Component, mergeProps, splitProps } from \"solid-js\";\nimport type {\n  ImgProps,\n  OnLoad,\n  OnLoadingComplete,\n  PlaceholderValue,\n} from \"./Image.types\";\nimport { handleLoading } from \"./Image.utils\";\n\n// ─── 额外内部 Props ────────────────────────────────────────────────────────────\n\nexport interface ImageElementProps extends ImgProps {\n  unoptimized: boolean;\n  placeholder: PlaceholderValue;\n  /** 上层通过 signal setter 传入，避免在此组件内管理状态 */\n  setBlurComplete: (v: boolean) => void;\n  setShowAltText: (v: boolean) => void;\n  sizesInput: string | undefined;\n  onLoad?: OnLoad;\n  onLoadingComplete?: OnLoadingComplete;\n  // onError?: (e: Event) => void;\n  /** 透传给原生 img 的 ref */\n  ref?: (el: HTMLImageElement) => void;\n}\n\n// ─── 组件 ─────────────────────────────────────────────────────────────────────\n\nconst ImageElement: Component<ImageElementProps> = (rawProps) => {\n  const props = mergeProps({ decoding: \"async\" as const }, rawProps);\n\n  // 分离内部 props 与透传给 <img> 的 props\n  const [internal, imgAttrs] = splitProps(props, [\n    \"src\",\n    \"srcSet\",\n    \"sizes\",\n    \"height\",\n    \"width\",\n    \"decoding\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"fetchpriority\",\n    \"placeholder\",\n    \"loading\",\n    \"unoptimized\",\n    \"fill\",\n    \"setBlurComplete\",\n    \"setShowAltText\",\n    \"sizesInput\",\n    \"onLoad\",\n    \"onError\",\n    \"onLoadingComplete\",\n    \"ref\",\n    \"alt\",\n  ]);\n\n  /**\n   * ref 回调：在元素挂载后立即处理\"图片在 hydrate 前已加载完成\"的情况，\n   * 并将 ref 透传给调用方（如需要访问 img 节点）。\n   */\n  function handleRef(img: HTMLImageElement) {\n    if (!img) return;\n\n    // 让 Safari 重新触发 onerror（如果图片在 hydrate 前就已失败）\n    if (internal.onError) {\n      // biome-ignore lint/correctness/noSelfAssign: If the image has an error before react hydrates, then the error is lost. The workaround is to wait until the image is mounted which is after hydration, then we set the src again to trigger the error handler (if there was an error).\n      img.src = img.src;\n    }\n\n    if (!import.meta.env.PROD) {\n      if (!internal.src) {\n        console.error('[Image] 缺少必填属性 \"src\"', img);\n      }\n      if (img.getAttribute(\"alt\") === null && internal.alt === undefined) {\n        console.error('[Image] 缺少必填属性 \"alt\"...');\n      }\n    }\n\n    // 图片在组件挂载前已完成加载（cached 场景）\n    if (img.complete) {\n      handleLoading(\n        img,\n        internal.placeholder,\n        internal.onLoad,\n        internal.onLoadingComplete,\n        internal.setBlurComplete,\n        internal.unoptimized,\n        internal.sizesInput,\n      );\n    }\n\n    // 透传 ref\n    internal.ref?.(img);\n  }\n\n  return (\n    // 注意属性顺序：\n    // 1. loading 在 src 之前，修复 Safari/Firefox 懒加载时机问题\n    // 2. sizes / srcSet 在 src 之前，避免 Safari 提前请求错误尺寸\n    // 3. src 最后设置\n    <img\n      {...imgAttrs}\n      // React 19 使用 camelCase fetchPriority；SolidJS 直接透传 JSX 属性即可\n      alt={internal.alt}\n      loading={internal.loading}\n      width={internal.width}\n      height={internal.height}\n      decoding={internal.decoding}\n      data-nimg={internal.fill ? \"fill\" : \"1\"}\n      class={internal.class}\n      style={internal.style}\n      sizes={internal.sizes}\n      srcset={internal.srcSet}\n      src={internal.src}\n      ref={handleRef}\n      onLoad={(e) => {\n        const img = e.currentTarget as HTMLImageElement;\n        handleLoading(\n          img,\n          internal.placeholder,\n          internal.onLoad,\n          internal.onLoadingComplete,\n          internal.setBlurComplete,\n          internal.unoptimized,\n          internal.sizesInput,\n        );\n      }}\n      onError={(e) => {\n        // 图片加载失败时显示 alt 文本\n        internal.setShowAltText(true);\n        if (internal.placeholder !== \"empty\") {\n          // 即使真实图片失败，也要移除 blur placeholder\n          internal.setBlurComplete(true);\n        }\n\n        if (!internal.onError) return;\n\n        if (typeof internal.onError !== \"function\") return;\n\n        internal.onError(e);\n      }}\n    />\n  );\n};\n\nexport default ImageElement;\n"],"mappings":";;;;gDAiCMoB,KAA8CC,MAAa;CAI/D,IAAM,CAACI,GAAUC,KAAYxB,EAHfD,EAAW,EAAEsB,UAAU,SAAkB,EAAEF,EAAS,EAGnB;EAC7C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAMF,SAASM,EAAUC,GAAuB;AACnCA,QAGDH,EAASI,YAEXD,EAAIE,MAAMF,EAAIE,MAaZF,EAAIY,YACNjC,EACEqB,GACAH,EAASf,aACTe,EAASV,QACTU,EAAST,mBACTS,EAASd,iBACTc,EAAShB,aACTgB,EAASX,WACV,EAIHW,EAASR,MAAMW,EAAI;;AAGrB,eAIE;EAAA,IAAAa,IAAAC,GAAA,EAAAC,IAeOhB;AA0BJ,SA1Ba,OAAAgB,KAAA,aAAAC,EAAAD,GAAAF,EAAA,GAATd,IAASc,GAAAI,EAAAJ,GAAAK,EAbVpB,GAAQ;GAAA,IAEZY,MAAG;AAAA,WAAEb,EAASa;;GAAG,IACjBS,UAAO;AAAA,WAAEtB,EAASsB;;GAAO,IACzBC,QAAK;AAAA,WAAEvB,EAASuB;;GAAK,IACrBC,SAAM;AAAA,WAAExB,EAASwB;;GAAM,IACvB1B,WAAQ;AAAA,WAAEE,EAASF;;GAAQ,IAAA,cAAA;AAAA,WAChBE,EAAS0B,OAAO,SAAS;;GAAG,IAAA,QAAA;AAAA,WAChC1B,EAAS2B;;GAAK,IACrBC,QAAK;AAAA,WAAE5B,EAAS4B;;GAAK,IACrBC,QAAK;AAAA,WAAE7B,EAAS6B;;GAAK,IACrBC,SAAM;AAAA,WAAE9B,EAAS+B;;GAAM,IACvB1B,MAAG;AAAA,WAAEL,EAASK;;GAAG,SAER2B,MAAM;IACb,IAAM7B,IAAM6B,EAAEC;AACdnD,MACEqB,GACAH,EAASf,aACTe,EAASV,QACTU,EAAST,mBACTS,EAASd,iBACTc,EAAShB,aACTgB,EAASX,WACV;;GACF,UACS2C,MAAM;AAEdhC,MAASZ,eAAe,GAAK,EACzBY,EAASf,gBAAgB,WAE3Be,EAASd,gBAAgB,GAAK,EAG3Bc,EAASI,WAEV,OAAOJ,EAASI,WAAY,cAEhCJ,EAASI,QAAQ4B,EAAE;;GACpB,CAAA,EAAA,IAAA,GAAA,EAAAhB;KAAA"}
+{"version":3,"file":"ImageElement.js","names":["Component","mergeProps","splitProps","ImgProps","OnLoad","OnLoadingComplete","PlaceholderValue","handleLoading","ImageElementProps","unoptimized","placeholder","setBlurComplete","v","setShowAltText","sizesInput","onLoad","onLoadingComplete","ref","el","HTMLImageElement","ImageElement","rawProps","props","decoding","const","internal","imgAttrs","handleRef","img","onError","src","import","meta","env","PROD","console","error","getAttribute","alt","undefined","complete","_el$","_tmpl$","_ref$","_$use","_$spread","_$mergeProps","loading","width","height","data-nimg","fill","class","style","sizes","srcset","srcSet","e","currentTarget"],"sources":["../../../src/components/image/ImageElement.tsx"],"sourcesContent":["/**\n * ImageElement.tsx\n * 单一职责：仅负责渲染原生 <img> 元素，并将 ref 回调、onLoad、onError 事件桥接到\n * 上层传入的副作用函数。不包含配置解析、preload 或 blur placeholder 逻辑。\n */\n\nimport { type Component, mergeProps, splitProps } from \"solid-js\";\nimport type {\n  ImgProps,\n  OnLoad,\n  OnLoadingComplete,\n  PlaceholderValue,\n} from \"./Image.types\";\nimport { handleLoading } from \"./Image.utils\";\n\n// ─── 额外内部 Props ────────────────────────────────────────────────────────────\n\nexport interface ImageElementProps extends ImgProps {\n  unoptimized: boolean;\n  placeholder: PlaceholderValue;\n  /** 上层通过 signal setter 传入，避免在此组件内管理状态 */\n  setBlurComplete: (v: boolean) => void;\n  setShowAltText: (v: boolean) => void;\n  sizesInput: string | undefined;\n  onLoad?: OnLoad;\n  onLoadingComplete?: OnLoadingComplete;\n  // onError?: (e: Event) => void;\n  /** 透传给原生 img 的 ref */\n  ref?: (el: HTMLImageElement) => void;\n}\n\n// ─── 组件 ─────────────────────────────────────────────────────────────────────\n\nconst ImageElement: Component<ImageElementProps> = (rawProps) => {\n  const props = mergeProps({ decoding: \"async\" as const }, rawProps);\n\n  // 分离内部 props 与透传给 <img> 的 props\n  const [internal, imgAttrs] = splitProps(props, [\n    \"src\",\n    \"srcSet\",\n    \"sizes\",\n    \"height\",\n    \"width\",\n    \"decoding\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"fetchpriority\",\n    \"placeholder\",\n    \"loading\",\n    \"unoptimized\",\n    \"fill\",\n    \"setBlurComplete\",\n    \"setShowAltText\",\n    \"sizesInput\",\n    \"onLoad\",\n    \"onError\",\n    \"onLoadingComplete\",\n    \"ref\",\n    \"alt\",\n  ]);\n\n  /**\n   * ref 回调：在元素挂载后立即处理\"图片在 hydrate 前已加载完成\"的情况，\n   * 并将 ref 透传给调用方（如需要访问 img 节点）。\n   */\n  function handleRef(img: HTMLImageElement) {\n    if (!img) return;\n\n    // 让 Safari 重新触发 onerror（如果图片在 hydrate 前就已失败）\n    if (internal.onError) {\n      // biome-ignore lint/correctness/noSelfAssign: If the image has an error before react hydrates, then the error is lost. The workaround is to wait until the image is mounted which is after hydration, then we set the src again to trigger the error handler (if there was an error).\n      img.src = img.src;\n    }\n\n    if (!import.meta.env.PROD) {\n      if (!internal.src) {\n        console.error('[Image] 缺少必填属性 \"src\"', img);\n      }\n      if (img.getAttribute(\"alt\") === null && internal.alt === undefined) {\n        console.error('[Image] 缺少必填属性 \"alt\"...');\n      }\n    }\n\n    // 图片在组件挂载前已完成加载（cached 场景）\n    if (img.complete) {\n      handleLoading(\n        img,\n        internal.placeholder,\n        internal.onLoad,\n        internal.onLoadingComplete,\n        internal.setBlurComplete,\n        internal.unoptimized,\n        internal.sizesInput,\n      );\n    }\n\n    // 透传 ref\n    internal.ref?.(img);\n  }\n\n  return (\n    // 注意属性顺序：\n    // 1. loading 在 src 之前，修复 Safari/Firefox 懒加载时机问题\n    // 2. sizes / srcSet 在 src 之前，避免 Safari 提前请求错误尺寸\n    // 3. src 最后设置\n    <img\n      {...imgAttrs}\n      // React 19 使用 camelCase fetchPriority；SolidJS 直接透传 JSX 属性即可\n      alt={internal.alt}\n      loading={internal.loading}\n      width={internal.width}\n      height={internal.height}\n      decoding={internal.decoding}\n      data-nimg={internal.fill ? \"fill\" : \"1\"}\n      class={internal.class}\n      style={internal.style}\n      sizes={internal.sizes}\n      srcset={internal.srcSet}\n      src={internal.src}\n      ref={handleRef}\n      onLoad={(e) => {\n        const img = e.currentTarget as HTMLImageElement;\n        handleLoading(\n          img,\n          internal.placeholder,\n          internal.onLoad,\n          internal.onLoadingComplete,\n          internal.setBlurComplete,\n          internal.unoptimized,\n          internal.sizesInput,\n        );\n      }}\n      onError={(e) => {\n        // 图片加载失败时显示 alt 文本\n        internal.setShowAltText(true);\n        if (internal.placeholder !== \"empty\") {\n          // 即使真实图片失败，也要移除 blur placeholder\n          internal.setBlurComplete(true);\n        }\n\n        if (!internal.onError) return;\n\n        if (typeof internal.onError !== \"function\") return;\n\n        internal.onError(e);\n      }}\n    />\n  );\n};\n\nexport default ImageElement;\n"],"mappings":";;;;8CAiCMoB,KAA8CC,MAAa;CAC/D,IAAMC,IAAQrB,EAAW,EAAEsB,UAAU,QAAiB,GAAGF,CAAQ,GAG3D,CAACI,GAAUC,KAAYxB,EAAWoB,GAAO;EAC7C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAK,CACN;CAMD,SAASK,EAAUC,GAAuB;EACnCA,MAGDH,EAASI,YAEXD,EAAIE,MAAMF,EAAIE,MAaZF,EAAIY,YACNjC,EACEqB,GACAH,EAASf,aACTe,EAASV,QACTU,EAAST,mBACTS,EAASd,iBACTc,EAAShB,aACTgB,EAASX,UACX,GAIFW,EAASR,MAAMW,CAAG;CACpB;CAEA,cAIE;EAAA,IAAAa,IAAAC,EAAA,GAAAC,IAeOhB;EA0BJ,OA1Ba,OAAAgB,KAAA,aAAAC,EAAAD,GAAAF,CAAA,IAATd,IAASc,GAAAI,EAAAJ,GAAAK,EAbVpB,GAAQ;GAAA,IAEZY,MAAG;IAAA,OAAEb,EAASa;GAAG;GAAA,IACjBS,UAAO;IAAA,OAAEtB,EAASsB;GAAO;GAAA,IACzBC,QAAK;IAAA,OAAEvB,EAASuB;GAAK;GAAA,IACrBC,SAAM;IAAA,OAAExB,EAASwB;GAAM;GAAA,IACvB1B,WAAQ;IAAA,OAAEE,EAASF;GAAQ;GAAA,IAAA,cAAA;IAAA,OAChBE,EAAS0B,OAAO,SAAS;GAAG;GAAA,IAAA,QAAA;IAAA,OAChC1B,EAAS2B;GAAK;GAAA,IACrBC,QAAK;IAAA,OAAE5B,EAAS4B;GAAK;GAAA,IACrBC,QAAK;IAAA,OAAE7B,EAAS6B;GAAK;GAAA,IACrBC,SAAM;IAAA,OAAE9B,EAAS+B;GAAM;GAAA,IACvB1B,MAAG;IAAA,OAAEL,EAASK;GAAG;GAAA,SAER2B,MAAM;IACb,IAAM7B,IAAM6B,EAAEC;IACdnD,EACEqB,GACAH,EAASf,aACTe,EAASV,QACTU,EAAST,mBACTS,EAASd,iBACTc,EAAShB,aACTgB,EAASX,UACX;GACF;GAAC,UACS2C,MAAM;IAEdhC,EAASZ,eAAe,EAAI,GACxBY,EAASf,gBAAgB,WAE3Be,EAASd,gBAAgB,EAAI,GAG1Bc,EAASI,WAEV,OAAOJ,EAASI,WAAY,cAEhCJ,EAASI,QAAQ4B,CAAC;GACpB;EAAC,CAAA,GAAA,IAAA,EAAA,GAAAhB;CAAA,EAAA,CAAA;AAGP"}

package/dist/components/image/ImagePreload.js

@@ -1,6 +1,6 @@
 import { Portal as e, createComponent as t, effect as n, setAttribute as r, template as i } from "solid-js/web";
 //#region src/components/image/ImagePreload.tsx
-var a = /* @__PURE__ */ i("<link rel=preload as=image>"), o = (i) => {
+var a = /*#__PURE__*/ i("<link rel=preload as=image>"), o = (i) => {
 	let { imgAttributes: o } = i, s = `__img-preload-${o.src}-${o.srcSet ?? ""}-${o.sizes ?? ""}`;
 	return typeof document < "u" && document.head.querySelector(`link[data-img-key="${s}"]`) ? null : t(e, {
 		get mount() {