@neut/ui 0.0.17 → 0.0.18

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

@@ -1 +1 @@
-{"version":3,"file":"Image.utils.js","names":["handleLoading","src","img","placeholder","setBlurComplete","onLoad","event","onLoadingComplete","INVALID_BACKGROUND_SIZE_VALUES","getImgProps","merged","mergeProps","imgConf","props","local","others","splitProps","config","c","imageConfigDefault","allSizes","a","b","deviceSizes","qualities","defaultLoader","style","sizes","fill","loader","layoutToStyle","layoutToSizes","layoutStyle","layoutSizes","staticSrc","blurDataURL","widthInt","getInt","heightInt","blurWidth","blurHeight","isStaticImport","staticImageData","isStaticRequire","ratio","unoptimized","isLazy","qualityInt","imgStyle","showAltText","backgroundImage","blurComplete","getImageBlurSvg","backgroundSize","placeholderStyle","imgAttributes","generateImgAttrs","loadingFinal","params","width","quality","x","isStaticImageData","svgWidth","svgHeight","viewBox","objectFit","getWidths","last","widths","kind","w","i","viewportWidthRe","percentSizes","match","smallestRatio","s","p"],"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":["getImgProps","config","normalizeConfig","imgConf","imageConfigDefault","merged","mergeProps","props","local","others","splitProps","loader","defaultLoader","resolveLayout","stat","resolveStaticImport","fill","widthInt","heightInt","blurDataURL","src","qualityInt","getInt","unoptimized","computeUnoptimized","isLazy","computeIsLazy","imgStyle","computeImgStyle","placeholderStyle","computePlaceholderStyle","imgAttributes","generateImgAttrs","buildImgProps","c","a","b","style","sizes","layout","layoutToStyle","layoutToSizes","layoutStyle","layoutSizes","result","isStaticImport","data","isStaticRequire","showAltText","blurComplete","placeholder","objectFit","objectPosition","backgroundImage","getImageBlurSvg","getPlaceholderStyle","loadingFinal","handleLoading"],"sources":["../../../src/components/image/Image.utils.ts"],"sourcesContent":["/**\n * `getImgProps`：把 `<Image>` 的 props 解析成原生 `<img>` 可用的属性集。\n *\n * 单一职责：**编排**各专项模块的结果——\n * - 静态导入识别 / 数值解析 → `./lib/static-import`\n * - URL 与 srcSet 生成 → `./lib/loader`\n * - blur 占位样式 → `./lib/blur`\n * - 开发期校验与警告 → `./lib/dev-checks`\n * - 加载完成后的副作用 → `./lib/handle-loading`\n *\n * 本文件不再自己实现上述任何一项，只负责顺序、默认值与最终 `props` / `meta` 组装。\n */\n\nimport { mergeProps, splitProps } from \"solid-js\";\nimport { imageConfigDefault } from \"./Image.config\";\nimport type {\n  ImageConfig,\n  ImageConfigComplete,\n  ImageLoaderWithConfig,\n  ImageProps,\n  ImgProps,\n  ImgPropsResult,\n  PlaceholderStyle,\n  StaticImport,\n} from \"./Image.types\";\nimport { getImageBlurSvg, getPlaceholderStyle } from \"./lib/blur\";\nimport {\n  runDevChecks,\n  trackImageForLcp,\n  type ValidLoadingValue,\n} from \"./lib/dev-checks\";\nimport { defaultLoader, generateImgAttrs } from \"./lib/loader\";\nimport { getInt, isStaticRequire, isStaticImport } from \"./lib/static-import\";\n\n// 保持既有导入路径可用：`ImageElement` 从本模块拿 `handleLoading`，\n// `Image.types` 从本模块拿 `VALID_LOADING_VALUES` 的类型。\nexport { handleLoading } from \"./lib/handle-loading\";\nexport { VALID_LOADING_VALUES } from \"./lib/dev-checks\";\n\nexport interface GetImgPropsOptions {\n  /** 省略时使用内置默认配置（与 ImageConfigProvider 的默认值一致） */\n  imgConf?: ImageConfigComplete;\n  blurComplete: boolean;\n  showAltText: boolean;\n}\n\n/**\n * 解析 `<Image>` 的 props。\n *\n * 流程：合并默认值 → 规范化 config → 解析静态导入 → 决定 unoptimized/lazy →\n * 开发期校验 → 计算样式与占位 → 生成 `src`/`srcSet` → 组装结果。\n */\nexport function getImgProps(\n  props: ImageProps,\n  { imgConf, blurComplete, showAltText }: GetImgPropsOptions,\n): ImgPropsResult {\n  // 先解析配置：下面合并 props 默认值时要读 config.unoptimized\n  const config = normalizeConfig(imgConf ?? imageConfigDefault);\n\n  const merged = mergeProps(\n    {\n      fill: false,\n      priority: false,\n      preload: false,\n      placeholder: \"empty\",\n      unoptimized: config.unoptimized,\n      decoding: \"async\",\n    } as const,\n    props,\n  );\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  const loader: ImageLoaderWithConfig = local.loader || defaultLoader;\n  const { style, sizes, fill } = resolveLayout(local);\n\n  // 静态导入（`import img from \"./x.png\"`）决定 src 与推导出的宽高\n  const stat = resolveStaticImport(local, fill);\n  const widthInt = stat.widthInt;\n  const heightInt = stat.heightInt;\n  const blurDataURL = local.blurDataURL || stat.blurDataURL;\n\n  const src = typeof local.src === \"string\" ? local.src : stat.src;\n  const qualityInt = getInt(local.quality);\n\n  // unoptimized / lazy 的推导：data:、blob:、config.unoptimized、.svg 都跳过优化\n  let unoptimized = computeUnoptimized(local, config, src);\n  const isLazy = computeIsLazy(local, src);\n\n  if (!import.meta.env.PROD) {\n    unoptimized = runDevChecks({\n      src,\n      config,\n      loader,\n      fill,\n      widthInt,\n      heightInt,\n      qualityInt,\n      unoptimized,\n      style,\n      props: {\n        width: local.width,\n        height: local.height,\n        loading: local.loading,\n        priority: local.priority,\n        preload: local.preload,\n        placeholder: local.placeholder,\n        blurDataURL,\n      },\n      otherKeys: Object.keys(others),\n      legacyProps: {\n        layout: local.layout,\n        objectFit: local.objectFit,\n        objectPosition: local.objectPosition,\n        lazyBoundary: local.lazyBoundary,\n        lazyRoot: local.lazyRoot,\n      },\n    });\n  }\n\n  const imgStyle = computeImgStyle({ fill, showAltText, style, local });\n  const placeholderStyle = computePlaceholderStyle({\n    blurComplete,\n    placeholder: local.placeholder,\n    blurDataURL,\n    stat,\n    widthInt,\n    heightInt,\n    imgStyle,\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 as ValidLoadingValue);\n\n  if (!import.meta.env.PROD) {\n    trackImageForLcp({\n      src: imgAttributes.src,\n      loading: loadingFinal,\n      placeholder: local.placeholder,\n    });\n  }\n\n  return {\n    props: buildImgProps({\n      others,\n      loadingFinal,\n      local,\n      widthInt,\n      heightInt,\n      imgStyle,\n      placeholderStyle,\n      imgAttributes,\n    }),\n    meta: {\n      unoptimized,\n      preload: local.preload || local.priority,\n      placeholder: local.placeholder,\n      fill,\n    },\n  };\n}\n\n// ─── 私有步骤 ─────────────────────────────────────────────────────────────────\n\n/** 合并 deviceSizes / imageSizes 得到 allSizes，并按升序排列（不改动入参） */\nexport function normalizeConfig(\n  c: ImageConfig | ImageConfigComplete,\n): ImageConfig {\n  if (\"allSizes\" in c) return c as ImageConfig;\n  return {\n    ...c,\n    allSizes: [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b),\n    deviceSizes: [...c.deviceSizes].sort((a, b) => a - b),\n    qualities: c.qualities ? [...c.qualities].sort((a, b) => a - b) : undefined,\n  };\n}\n\ninterface LayoutResult {\n  style: ImageProps[\"style\"];\n  sizes: string | undefined;\n  fill: boolean;\n}\n\n/**\n * 处理遗留的 `layout` prop。它是 next 12 的写法，这里翻译成\n * `fill` / `sizes` / `style` 三者的等价组合。\n */\nfunction resolveLayout(local: {\n  layout?: ImageProps[\"layout\"];\n  style?: ImageProps[\"style\"];\n  sizes?: string;\n  /** 调用方（getImgProps）已通过 mergeProps 保证默认值为 false，故此处必填 */\n  fill: boolean;\n}): LayoutResult {\n  let style = local.style;\n  let sizes = local.sizes;\n  let fill = local.fill;\n\n  const layout = local.layout;\n  if (!layout) return { style, sizes, fill };\n  if (layout === \"fill\") 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\n  const layoutStyle = layoutToStyle[layout];\n  if (layoutStyle) style = { ...style, ...layoutStyle };\n  const layoutSizes = layoutToSizes[layout];\n  if (layoutSizes && !sizes) sizes = layoutSizes;\n\n  return { style, sizes, fill };\n}\n\ninterface StaticResolution {\n  src: string;\n  widthInt: number | undefined;\n  heightInt: number | undefined;\n  blurDataURL: string | undefined;\n  blurWidth: number | undefined;\n  blurHeight: number | undefined;\n}\n\n/**\n * 解析静态导入：拿到 src、blur 数据，并在调用方未指定宽高时按原图比例推导。\n *\n * 注意：`fill` 下不做推导（宽高由容器决定），否则填充图会被推导出固定尺寸。\n */\nfunction resolveStaticImport(\n  local: {\n    src: string | StaticImport;\n    width?: string | number;\n    height?: string | number;\n  },\n  fill: boolean,\n): StaticResolution {\n  const result: StaticResolution = {\n    src: \"\",\n    widthInt: getInt(local.width),\n    heightInt: getInt(local.height),\n    blurDataURL: undefined,\n    blurWidth: undefined,\n    blurHeight: undefined,\n  };\n\n  if (!isStaticImport(local.src)) return result;\n\n  const data = isStaticRequire(local.src) ? local.src.default : local.src;\n\n  if (!data.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        data,\n      )}`,\n    );\n  }\n  if (!data.height || !data.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        data,\n      )}`,\n    );\n  }\n\n  result.src = data.src;\n  result.blurWidth = data.blurWidth;\n  result.blurHeight = data.blurHeight;\n  result.blurDataURL = data.blurDataURL;\n\n  if (!fill) {\n    if (!result.widthInt && !result.heightInt) {\n      result.widthInt = data.width;\n      result.heightInt = data.height;\n    } else if (result.widthInt && !result.heightInt) {\n      result.heightInt = Math.round(\n        data.height * (result.widthInt / data.width),\n      );\n    } else if (!result.widthInt && result.heightInt) {\n      result.widthInt = Math.round(\n        data.width * (result.heightInt / data.height),\n      );\n    }\n  }\n\n  return result;\n}\n\n/**\n * 判断是否跳过图片优化服务。\n *\n * 三种情况必须跳过：\n * - `data:` / `blob:` URL（无法被服务端处理）\n * - 配置里全局 `unoptimized`\n * - SVG 且未显式允许（走优化服务会被代理，反而出问题）\n */\nfunction computeUnoptimized(\n  local: { unoptimized?: boolean },\n  config: ImageConfig,\n  src: string,\n): boolean {\n  if (local.unoptimized) return true;\n  if (!src || src.startsWith(\"data:\") || src.startsWith(\"blob:\")) return true;\n  if (config.unoptimized) return true;\n  if (!config.dangerouslyAllowSVG && src.split(\"?\", 1)[0].endsWith(\".svg\")) {\n    return true;\n  }\n  return false;\n}\n\n/**\n * 是否给 `<img>` 加 `loading=\"lazy\"`。\n * `priority` / `preload` 表示\"首屏关键图\"，必须立即加载；\n * `data:` / `blob:` 不占网络请求，也不需要 lazy。\n */\nfunction computeIsLazy(\n  local: { priority?: boolean; preload?: boolean; loading?: string },\n  src: string,\n): boolean {\n  if (local.priority || local.preload) return false;\n  if (local.loading === \"eager\") return false;\n  if (!src || src.startsWith(\"data:\") || src.startsWith(\"blob:\")) return false;\n  return true;\n}\n\n/** 最终内联样式的类型：由 `Object.assign` 合并出来的 CSS 属性集合 */\ntype ImgStyle = NonNullable<ImageProps[\"style\"]>;\n\ninterface ImgStyleOptions {\n  fill: boolean;\n  showAltText: boolean;\n  style: ImageProps[\"style\"];\n  local: { objectFit?: string; objectPosition?: string };\n}\n\n/**\n * 组装最终内联样式。\n * - `fill` 时补齐绝对定位与 100% 宽高（`object-fit` / `object-position` 透传）\n * - 不显示 alt 文本时用 `color: transparent` 隐藏浏览器自带的替代文字\n * - 调用方传入的 `style` 最后合并，优先级最高\n */\nfunction computeImgStyle({\n  fill,\n  showAltText,\n  style,\n  local,\n}: ImgStyleOptions): ImgStyle {\n  return 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  ) as ImgStyle;\n}\n\ninterface PlaceholderOptions {\n  blurComplete: boolean;\n  placeholder: string;\n  blurDataURL: string | undefined;\n  stat: StaticResolution;\n  widthInt: number | undefined;\n  heightInt: number | undefined;\n  imgStyle: ImgStyle;\n}\n\n/** 计算占位背景图（blur SVG 或自定义 data URL），再交给 `lib/blur` 生成样式 */\nfunction computePlaceholderStyle({\n  blurComplete,\n  placeholder,\n  blurDataURL,\n  stat,\n  widthInt,\n  heightInt,\n  imgStyle,\n}: PlaceholderOptions): PlaceholderStyle {\n  // 已解码完成或 placeholder=empty 时不显示占位\n  if (blurComplete || placeholder === \"empty\") return {};\n\n  const objectFit = imgStyle[\"object-fit\"] as string | undefined;\n  const objectPosition = imgStyle[\"object-position\"] as string | undefined;\n\n  const backgroundImage =\n    placeholder === \"blur\"\n      ? `url(\"data:image/svg+xml;charset=utf-8,${getImageBlurSvg({\n          widthInt,\n          heightInt,\n          blurWidth: stat.blurWidth,\n          blurHeight: stat.blurHeight,\n          blurDataURL,\n          objectFit,\n        })}\")`\n      : `url(\"${placeholder}\")`; // 形如 data:image/...\n\n  return getPlaceholderStyle({\n    blurComplete,\n    placeholder,\n    objectFit,\n    objectPosition,\n    backgroundImage,\n  });\n}\n\ninterface BuildPropsOptions {\n  others: Record<string, unknown>;\n  loadingFinal: ValidLoadingValue;\n  local: {\n    fetchpriority?: ImageProps[\"fetchpriority\"];\n    decoding?: string;\n    class?: string;\n    overrideSrc?: string;\n  };\n  widthInt: number | undefined;\n  heightInt: number | undefined;\n  imgStyle: ImgStyle;\n  placeholderStyle: PlaceholderStyle;\n  imgAttributes: {\n    src: string;\n    srcSet: string | undefined;\n    sizes: string | undefined;\n  };\n}\n\n/** 组装最终写进 `<img>` 的属性集 */\nfunction buildImgProps({\n  others,\n  loadingFinal,\n  local,\n  widthInt,\n  heightInt,\n  imgStyle,\n  placeholderStyle,\n  imgAttributes,\n}: BuildPropsOptions): ImgProps {\n  return {\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  } as ImgProps;\n}\n"],"mappings":"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"}

package/dist/components/image/ImageElement.js

@@ -1,9 +1,10 @@
-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";
+import { callEventHandler as e } from "../../utils/call-event-handler.js";
+import { handleLoading as t } from "./lib/handle-loading.js";
+import { mergeProps as n, spread as r, template as i, use as a } from "solid-js/web";
+import { mergeProps as o, splitProps as s } from "solid-js";
 //#region src/components/image/ImageElement.tsx
-var s = /*#__PURE__*/ r("<img>", !0, !1, !1), c = (r) => {
-	let c = a({ decoding: "async" }, r), [l, u] = o(c, [
+var c = /*#__PURE__*/ i("<img>", !0, !1, !1), l = (i) => {
+	let l = o({ decoding: "async" }, i), [u, d] = s(l, [
 		"src",
 		"srcSet",
 		"sizes",
@@ -27,56 +28,59 @@ var s = /*#__PURE__*/ r("<img>", !0, !1, !1), c = (r) => {
 		"ref",
 		"alt"
 	]);
-	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));
+	function f(e) {
+		e && (u.onError && (e.src = e.src), e.complete && t(e, u.placeholder, u.onLoad, u.onLoadingComplete, u.setBlurComplete, u.unoptimized, u.sizesInput), u.ref?.(e));
 	}
 	return (() => {
-		var r = s(), a = d;
-		return typeof a == "function" ? i(a, r) : d = r, n(r, t(u, {
+		var i = c(), o = f;
+		return typeof o == "function" ? a(o, i) : f = i, r(i, n(d, {
 			get alt() {
-				return l.alt;
+				return u.alt;
 			},
 			get loading() {
-				return l.loading;
+				return u.loading;
 			},
 			get width() {
-				return l.width;
+				return u.width;
 			},
 			get height() {
-				return l.height;
+				return u.height;
 			},
 			get decoding() {
-				return l.decoding;
+				return u.decoding;
 			},
 			get "data-nimg"() {
-				return l.fill ? "fill" : "1";
+				return u.fill ? "fill" : "1";
 			},
 			get class() {
-				return l.class;
+				return u.class;
+			},
+			get classList() {
+				return u.classList;
 			},
 			get style() {
-				return l.style;
+				return u.style;
 			},
 			get sizes() {
-				return l.sizes;
+				return u.sizes;
 			},
 			get srcset() {
-				return l.srcSet;
+				return u.srcSet;
 			},
 			get src() {
-				return l.src;
+				return u.src;
 			},
-			onLoad: (t) => {
-				let n = t.currentTarget;
-				e(n, l.placeholder, l.onLoad, l.onLoadingComplete, l.setBlurComplete, l.unoptimized, l.sizesInput);
+			onLoad: (e) => {
+				let n = e.currentTarget;
+				t(n, u.placeholder, u.onLoad, u.onLoadingComplete, u.setBlurComplete, u.unoptimized, u.sizesInput);
 			},
-			onError: (e) => {
-				l.setShowAltText(!0), l.placeholder !== "empty" && l.setBlurComplete(!0), l.onError && typeof l.onError == "function" && l.onError(e);
+			onError: (t) => {
+				u.setShowAltText(!0), u.placeholder !== "empty" && u.setBlurComplete(!0), e(u.onError, t);
 			}
-		}), !1, !1), r;
+		}), !1, !1), i;
 	})();
 };
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=ImageElement.js.map

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","mergeProps","_$use","_$mergeProps","mergeProps$1","_tmpl$","ImageElement","props","rawProps","internal","imgAttrs","splitProps","handleRef","img","handleLoading","_el$","_ref$","use","spread","mergeProps","\"class\"","\"onLoad\"","e","\"onError\""],"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;EACxC,AAAKA,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,IAAA2B,QAAA;IAAA,OAChCrD,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;GAAAiD,SAERtB,MAAM;IACb,IAAM7B,IAAM6B,EAAEC;IACdnD,EACEqB,GACAH,EAASf,aACTe,EAASV,QACTU,EAAST,mBACTS,EAASd,iBACTc,EAAShB,aACTgB,EAASX,UACX;GACF;GAACmE,UACSxB,MAAM;IAQd,AANAhC,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"}
+{"version":3,"file":"ImageElement.js","names":["Component","mergeProps","splitProps","ImgProps","OnLoad","OnLoadingComplete","PlaceholderValue","callEventHandler","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","classList","style","sizes","srcset","srcSet","e","currentTarget","mergeProps","_$use","_$mergeProps","mergeProps$1","_tmpl$","ImageElement","props","rawProps","internal","imgAttrs","splitProps","handleRef","img","handleLoading","_el$","_ref$","use","spread","mergeProps","\"class\"","\"onLoad\"","\"onError\"","callEventHandler","e"],"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 { callEventHandler } from \"~/utils\";\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      classList={internal.classList}\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        // 此前这里用 `typeof internal.onError !== \"function\"` 直接 return，\n        // 等于把 Solid 的数组/绑定形式**静默丢掉**（既不报错也不回调）。\n        // 统一走仓库的 callEventHandler（数组=多个处理器，非函数项跳过）。\n        callEventHandler(internal.onError, e);\n      }}\n    />\n  );\n};\n\nexport default ImageElement;\n"],"mappings":";;;;;8CAkCMqB,KAA8CC,MAAa;CAC/D,IAAMC,IAAQtB,EAAW,EAAEuB,UAAU,QAAiB,GAAGF,CAAQ,GAG3D,CAACI,GAAUC,KAAYzB,EAAWqB,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;EACxC,AAAKA,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,IAgBOhB;EAyBJ,OAzBa,OAAAgB,KAAA,aAAAC,EAAAD,GAAAF,CAAA,IAATd,IAASc,GAAAI,EAAAJ,GAAAK,EAdVpB,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,IAAA4B,QAAA;IAAA,OAChCtD,EAAS2B;GAAK;GAAA,IACrBC,YAAS;IAAA,OAAE5B,EAAS4B;GAAS;GAAA,IAC7BC,QAAK;IAAA,OAAE7B,EAAS6B;GAAK;GAAA,IACrBC,QAAK;IAAA,OAAE9B,EAAS8B;GAAK;GAAA,IACrBC,SAAM;IAAA,OAAE/B,EAASgC;GAAM;GAAA,IACvB3B,MAAG;IAAA,OAAEL,EAASK;GAAG;GAAAkD,SAERtB,MAAM;IACb,IAAM9B,IAAM8B,EAAEC;IACdpD,EACEqB,GACAH,EAASf,aACTe,EAASV,QACTU,EAAST,mBACTS,EAASd,iBACTc,EAAShB,aACTgB,EAASX,UACX;GACF;GAACmE,UACSvB,MAAM;IAWdpD,AATAmB,EAASZ,eAAe,EAAI,GACxBY,EAASf,gBAAgB,WAE3Be,EAASd,gBAAgB,EAAI,GAM/BL,EAAiBmB,EAASI,SAAS6B,CAAC;GACtC;EAAC,CAAA,GAAA,IAAA,EAAA,GAAAjB;CAAA,EAAA,CAAA;AAGP"}

package/dist/components/image/lib/blur.d.ts

@@ -0,0 +1,31 @@
+import { PlaceholderStyle } from '../Image.types';
+interface BlurSvgOptions {
+    widthInt?: number;
+    heightInt?: number;
+    blurWidth?: number;
+    blurHeight?: number;
+    /** 省略时按空串处理（生产构建跳过开发期校验时可能出现没有 blurDataURL 的情况） */
+    blurDataURL?: string;
+    objectFit?: string;
+}
+/**
+ * 生成内联的 blur SVG（URL 编码为 data URL 的 payload）。
+ *
+ * 采用与 next/image 相同的手法：把原图按放大 40 倍绘制，再叠加高斯模糊滤镜，
+ * 得到"低分辨率占位图"的观感，而不必真的生成缩略图。
+ */
+export declare function getImageBlurSvg({ widthInt, heightInt, blurWidth, blurHeight, blurDataURL, objectFit, }: BlurSvgOptions): string;
+interface PlaceholderOptions {
+    /** 已解码完成则不必再显示占位 */
+    blurComplete: boolean;
+    placeholder: string;
+    objectFit?: string;
+    objectPosition?: string;
+    backgroundImage: string | null;
+}
+/**
+ * 由背景图字符串得到完整的占位样式。
+ * 没有背景图（`placeholder="empty"` 或已解码）时返回空对象，不产生多余样式。
+ */
+export declare function getPlaceholderStyle({ backgroundImage, objectFit, objectPosition, }: PlaceholderOptions): PlaceholderStyle;
+export {};

package/dist/components/image/lib/blur.js

@@ -0,0 +1,24 @@
+//#region src/components/image/lib/blur.ts
+var e = [
+	"-moz-initial",
+	"fill",
+	"none",
+	"scale-down",
+	void 0
+];
+function t({ widthInt: e, heightInt: t, blurWidth: n, blurHeight: r, blurDataURL: i = "", objectFit: a }) {
+	let o = n ? n * 40 : e, s = r ? r * 40 : t, c = o && s ? `viewBox='0 0 ${o} ${s}'` : "";
+	return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${c}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%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='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${c ? "none" : a === "contain" ? "xMidYMid" : a === "cover" ? "xMidYMid slice" : "none"}' style='filter: url(%23b);' href='${i}'/%3E%3C/svg%3E`;
+}
+function n({ backgroundImage: t, objectFit: n, objectPosition: r }) {
+	return t ? {
+		"background-size": e.includes(n) ? n === "fill" ? "100% 100%" : "cover" : n,
+		"background-position": r || "50% 50%",
+		"background-repeat": "no-repeat",
+		"background-image": t
+	} : {};
+}
+//#endregion
+export { t as getImageBlurSvg, n as getPlaceholderStyle };
+
+//# sourceMappingURL=blur.js.map

package/dist/components/image/lib/blur.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur.js","names":["INVALID_BACKGROUND_SIZE_VALUES","getImageBlurSvg","svgWidth","blurWidth","widthInt","svgHeight","blurHeight","heightInt","viewBox","objectFit","blurDataURL","getPlaceholderStyle","backgroundImage","objectPosition"],"sources":["../../../../src/components/image/lib/blur.ts"],"sourcesContent":["/**\n * blur placeholder 的 SVG 生成与背景样式计算。\n *\n * 单一职责：把 blur 数据与目标尺寸转换成可直接写进 `style` 的 CSS 值。\n */\n\nimport type { PlaceholderStyle } from \"../Image.types\";\n\n/** `object-fit` 里不能直接当 `background-size` 用的值 */\nconst INVALID_BACKGROUND_SIZE_VALUES = [\n  \"-moz-initial\",\n  \"fill\",\n  \"none\",\n  \"scale-down\",\n  undefined,\n];\n\ninterface BlurSvgOptions {\n  widthInt?: number;\n  heightInt?: number;\n  blurWidth?: number;\n  blurHeight?: number;\n  /** 省略时按空串处理（生产构建跳过开发期校验时可能出现没有 blurDataURL 的情况） */\n  blurDataURL?: string;\n  objectFit?: string;\n}\n\n/**\n * 生成内联的 blur SVG（URL 编码为 data URL 的 payload）。\n *\n * 采用与 next/image 相同的手法：把原图按放大 40 倍绘制，再叠加高斯模糊滤镜，\n * 得到\"低分辨率占位图\"的观感，而不必真的生成缩略图。\n */\nexport function getImageBlurSvg({\n  widthInt,\n  heightInt,\n  blurWidth,\n  blurHeight,\n  blurDataURL = \"\",\n  objectFit,\n}: BlurSvgOptions): 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\ninterface PlaceholderOptions {\n  /** 已解码完成则不必再显示占位 */\n  blurComplete: boolean;\n  placeholder: string;\n  objectFit?: string;\n  objectPosition?: string;\n  backgroundImage: string | null;\n}\n\n/**\n * 由背景图字符串得到完整的占位样式。\n * 没有背景图（`placeholder=\"empty\"` 或已解码）时返回空对象，不产生多余样式。\n */\nexport function getPlaceholderStyle({\n  backgroundImage,\n  objectFit,\n  objectPosition,\n}: PlaceholderOptions): PlaceholderStyle {\n  if (!backgroundImage) return {};\n\n  const backgroundSize = !INVALID_BACKGROUND_SIZE_VALUES.includes(objectFit)\n    ? objectFit\n    : objectFit === \"fill\"\n      ? \"100% 100%\" // `fill` 在 background-size 下的等价写法\n      : \"cover\";\n\n  return {\n    \"background-size\": backgroundSize,\n    \"background-position\": objectPosition || \"50% 50%\",\n    \"background-repeat\": \"no-repeat\",\n    \"background-image\": backgroundImage,\n  };\n}\n"],"mappings":";AASA,IAAMA,IAAiC;CACrC;CACA;CACA;CACA;CACA,KAAA;AACF;AAkBA,SAAgBC,EAAgB,EAC9B,aACA,cACA,cACA,eACA,iBAAc,IACd,gBACyB;CACzB,IACMC,IAAWC,IAAYA,IAAY,KAAKC,GACxCC,IAAYC,IAAaA,IAAa,KAAKC,GAE3CC,IACJN,KAAYG,IAAY,gBAAgBH,EAAS,GAAGG,EAAU,KAAK;CASrE,OAAO,6CAA6CG,EAAQ,ybARhCA,IACxB,SACAC,MAAc,YACZ,aACAA,MAAc,UACZ,mBACA,OAEygB,qCAAqCC,EAAY;AACpkB;AAeA,SAAgBC,EAAoB,EAClC,oBACA,cACA,qBACuC;CASvC,OARKC,IAQE;EACL,mBAPsBZ,EAA+B,SAASS,CAAS,IAErEA,MAAc,SACZ,cACA,UAHFA;EAOF,uBAAuBI,KAAkB;EACzC,qBAAqB;EACrB,oBAAoBD;CACtB,IAb6B,CAAC;AAchC"}

package/dist/components/image/lib/dev-checks.d.ts

@@ -0,0 +1,52 @@
+import { ImageConfig, ImageLoaderWithConfig, ImageProps } from '../Image.types';
+/** `loading` 的合法取值（含"未传"，表示交给 `isLazy` 决定） */
+export declare const VALID_LOADING_VALUES: readonly ["lazy", "eager", undefined];
+export type ValidLoadingValue = (typeof VALID_LOADING_VALUES)[number];
+/** 是否是可用的 loading 值 */
+export declare function isValidLoading(value: unknown): value is ValidLoadingValue;
+interface DevCheckContext {
+    /** 已解析出的最终 src（可能是空串） */
+    src: string;
+    config: ImageConfig;
+    loader: ImageLoaderWithConfig;
+    fill: boolean;
+    /** 解析后的宽高（`NaN` 表示非法） */
+    widthInt: number | undefined;
+    heightInt: number | undefined;
+    qualityInt: number | undefined;
+    /** `unoptimized` 的当前值，可能会被本函数改写 */
+    unoptimized: boolean;
+    /** 生效后的内联样式（用于检测与 `fill` 冲突的宽高） */
+    style: ImageProps["style"];
+    /** 用户在 placeholder / loading / priority / preload / 旧属性上的原始输入 */
+    props: {
+        width?: unknown;
+        height?: unknown;
+        loading?: unknown;
+        priority?: boolean;
+        preload?: boolean;
+        placeholder: string;
+        blurDataURL?: string;
+    };
+    /** 未被子组件消费的剩余属性名（用于探测 `ref` 之类不支持的用法） */
+    otherKeys: string[];
+    /** next 13 之前的旧属性（有值就发 codemod 提示） */
+    legacyProps: Record<string, unknown>;
+}
+/**
+ * 入口：执行全部开发期校验。
+ * 返回可能被改写的 `unoptimized`（`src` 为空时会强制为 true）。
+ */
+export declare function runDevChecks(ctx: DevCheckContext): boolean;
+/**
+ * 记录本次渲染的图片，并（首次）注册 LCP 观察器。
+ * 目的是在开发环境提示"首屏最大的那张图用了 lazy"。
+ */
+export declare function trackImageForLcp(entry: {
+    src: string;
+    loading: ValidLoadingValue;
+    placeholder: string;
+}): void;
+/** 仅供测试：重置模块级状态（观察器与已记录图片） */
+export declare function resetLcpTracking(): void;
+export {};

package/dist/components/image/lib/handle-loading.d.ts

@@ -0,0 +1,13 @@
+import { OnLoad, OnLoadingComplete, PlaceholderValue } from '../Image.types';
+/** 用于追踪每个 img 节点已处理的 src，避免重复触发 */
+type ImgWithDataProp = HTMLImageElement & {
+    "data-loaded-src"?: string;
+};
+/**
+ * 在图片加载/hydrate 后调用。
+ * - 使用 img.decode() 确保像素已解码再触发回调
+ * - 清除 blur placeholder
+ * - 开发环境下输出 fill / sizes 相关警告
+ */
+export declare function handleLoading(img: ImgWithDataProp, placeholder: PlaceholderValue, onLoad: OnLoad | undefined, onLoadingComplete: OnLoadingComplete | undefined, setBlurComplete: (v: boolean) => void, unoptimized: boolean, sizesInput: string | undefined): void;
+export {};

package/dist/components/image/lib/handle-loading.js

@@ -0,0 +1,20 @@
+//#region src/components/image/lib/handle-loading.ts
+function e(e, t, n, r, i, a, o) {
+	let s = e?.src;
+	e && e["data-loaded-src"] !== s && (e["data-loaded-src"] = s, ("decode" in e ? e.decode() : Promise.resolve()).catch(() => {}).then(() => {
+		if (e.parentElement && e.isConnected) {
+			if (t !== "empty" && i(!0), n) {
+				let t = new Event("load");
+				Object.defineProperty(t, "target", {
+					writable: !1,
+					value: e
+				}), n(t);
+			}
+			r && r(e);
+		}
+	}));
+}
+//#endregion
+export { e as handleLoading };
+
+//# sourceMappingURL=handle-loading.js.map

package/dist/components/image/lib/handle-loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-loading.js","names":["handleLoading","src","img","placeholder","setBlurComplete","onLoad","event","onLoadingComplete"],"sources":["../../../../src/components/image/lib/handle-loading.ts"],"sourcesContent":["/**\n * 图片加载完成后的副作用。\n *\n * 单一职责：decode 完成后触发回调、清除 blur 占位、在开发环境输出\n * fill / sizes 与宽高比相关的使用警告。纯 TypeScript，无 JSX。\n */\n\nimport type {\n  OnLoad,\n  OnLoadingComplete,\n  PlaceholderValue,\n} from \"../Image.types\";\n\n/** 用于追踪每个 img 节点已处理的 src，避免重复触发 */\ntype ImgWithDataProp = HTMLImageElement & { \"data-loaded-src\"?: string };\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  // 走到这里说明 img.parentElement 一定存在（函数开头的 `!img.parentElement ||`\n  // 已经把脱离 DOM 的情况挡掉了），因此不需要再判空\n  const { position } = window.getComputedStyle(\n    img.parentElement as HTMLElement,\n  );\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  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"],"mappings":";AAsBA,SAAgBA,EACd,GACA,GACA,GACA,GACA,GACA,GACA,GACM;CACN,IAAMC,IAAMC,GAAK;CAEjB,AAAKA,KAAOA,EAAI,uBAAuBD,MACvC,EAAI,qBAAqBA,IAEA,YAAYC,IAAMA,EAAI,OAAO,IAAI,QAAQ,QAAQ,EAAA,CAExE,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW;EAE3B,IAAKA,EAAI,iBAAkBA,EAAI,aAM/B;OAJIC,MAAgB,WAClBC,EAAgB,EAAI,GAGlBC,GAAQ;IACV,IAAMC,IAAQ,IAAI,MAAM,MAAM;IAE9B,AADA,OAAO,eAAeA,GAAO,UAAU;KAAE,UAAU;KAAO,OAAOJ;IAAI,CAAC,GACtEG,EACEC,CACF;GACF;GAEA,AAAIC,KACFA,EAAkBL,CAAG;EAHvB;CAUF,CAAC;AACH"}

package/dist/components/image/lib/loader.d.ts

@@ -0,0 +1,39 @@
+import { ImageConfig, ImageLoaderProps, ImageLoaderWithConfig } from '../Image.types';
+/**
+ * 默认 loader。
+ * - 外部 URL（http/https）原样返回，不经过优化服务
+ * - 本地图片追加 `url` / `w` / `q` 参数，交给服务端的 `/_image` 处理
+ *
+ * 开发环境下缺失 `src` / `width` 会直接抛错，避免静默生成坏 URL。
+ */
+export declare function defaultLoader({ src, width, quality, }: ImageLoaderProps): string;
+interface ImgAttrsData {
+    config: ImageConfig;
+    src: string;
+    unoptimized: boolean;
+    loader: ImageLoaderWithConfig;
+    width?: number;
+    quality?: number;
+    sizes?: string;
+}
+interface ImgAttrsResult {
+    src: string;
+    srcSet: string | undefined;
+    sizes: string | undefined;
+}
+/**
+ * 生成 `src` / `srcSet` / `sizes`。
+ * `unoptimized` 时不做任何加工（`srcSet` 与 `sizes` 返回 `undefined`，从 DOM 上消失）。
+ */
+export declare function generateImgAttrs({ config, src, unoptimized, width, quality, sizes, loader, }: ImgAttrsData): ImgAttrsResult;
+/**
+ * 决定要生成哪些宽度，以及 `srcSet` 描述符用 `w` 还是 `x`：
+ * - 显式 `sizes`：解析其中的 `vw` 百分比，据此过滤 `deviceSizes`，用 `w`
+ * - 未传 `sizes` 但传了 `width`：用 `width` / `2x`，用 `x`
+ * - 都没有：直接用 `deviceSizes`，用 `w`
+ */
+export declare function getWidths({ deviceSizes, allSizes }: ImageConfig, width: number | undefined, sizes: string | undefined): {
+    widths: number[];
+    kind: "w" | "x";
+};
+export {};

package/dist/components/image/lib/loader.js

@@ -0,0 +1,57 @@
+//#region src/components/image/lib/loader.ts
+function e({ src: e, width: t, quality: n }) {
+	if (e.startsWith("http://") || e.startsWith("https://")) return e;
+	let r = new URLSearchParams();
+	return r.set("url", e), r.set("w", String(t)), n && r.set("q", String(n)), `/_image?${r.toString()}`;
+}
+function t({ config: e, src: t, unoptimized: r, width: i, quality: a, sizes: o, loader: s }) {
+	if (r) return {
+		src: t,
+		srcSet: void 0,
+		sizes: void 0
+	};
+	let { widths: c, kind: l } = n(e, i, o), u = c.length - 1;
+	return {
+		sizes: !o && l === "w" ? "100vw" : o,
+		srcSet: c.map((n, r) => `${s({
+			config: e,
+			src: t,
+			quality: a,
+			width: n
+		})} ${l === "w" ? n : r + 1}${l}`).join(", "),
+		src: s({
+			config: e,
+			src: t,
+			quality: a,
+			width: c[u]
+		})
+	};
+}
+function n({ deviceSizes: e, allSizes: t }, n, r) {
+	if (r) {
+		let n = /(^|\s)(1?\d?\d)vw/g, i = [];
+		for (let e; e = n.exec(r);) i.push(Number.parseInt(e[2], 10));
+		if (i.length) {
+			let n = Math.min(...i) * .01;
+			return {
+				widths: t.filter((t) => t >= e[0] * n),
+				kind: "w"
+			};
+		}
+		return {
+			widths: t,
+			kind: "w"
+		};
+	}
+	return typeof n == "number" ? {
+		widths: [...new Set([n, n * 2].map((e) => t.find((t) => t >= e) || t[t.length - 1]))],
+		kind: "x"
+	} : {
+		widths: e,
+		kind: "w"
+	};
+}
+//#endregion
+export { e as defaultLoader, t as generateImgAttrs, n as getWidths };
+
+//# sourceMappingURL=loader.js.map

package/dist/components/image/lib/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","names":["defaultLoader","src","params","width","quality","generateImgAttrs","unoptimized","getWidths","config","sizes","last","widths","kind","loader","w","i","viewportWidthRe","percentSizes","match","smallestRatio","allSizes","s","deviceSizes","p"],"sources":["../../../../src/components/image/lib/loader.ts"],"sourcesContent":["/**\n * 图片 URL 与 `srcSet` 生成。\n *\n * 单一职责：把「配置 + src + 宽度」变成最终的 URL / `srcSet` / `sizes` 字符串。\n * 不含 props 解析、不含校验、不含样式。\n */\n\nimport type {\n  ImageConfig,\n  ImageLoaderProps,\n  ImageLoaderWithConfig,\n} from \"../Image.types\";\n\n/**\n * 默认 loader。\n * - 外部 URL（http/https）原样返回，不经过优化服务\n * - 本地图片追加 `url` / `w` / `q` 参数，交给服务端的 `/_image` 处理\n *\n * 开发环境下缺失 `src` / `width` 会直接抛错，避免静默生成坏 URL。\n */\nexport function defaultLoader({\n  src,\n  width,\n  quality,\n}: 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  if (src.startsWith(\"http://\") || src.startsWith(\"https://\")) {\n    return src;\n  }\n\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\ninterface ImgAttrsData {\n  config: ImageConfig;\n  src: string;\n  unoptimized: boolean;\n  loader: ImageLoaderWithConfig;\n  width?: number;\n  quality?: number;\n  sizes?: string;\n}\n\ninterface ImgAttrsResult {\n  src: string;\n  srcSet: string | undefined;\n  sizes: string | undefined;\n}\n\n/**\n * 生成 `src` / `srcSet` / `sizes`。\n * `unoptimized` 时不做任何加工（`srcSet` 与 `sizes` 返回 `undefined`，从 DOM 上消失）。\n */\nexport function generateImgAttrs({\n  config,\n  src,\n  unoptimized,\n  width,\n  quality,\n  sizes,\n  loader,\n}: ImgAttrsData): ImgAttrsResult {\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    // `src` 刻意放在最后：浏览器（尤其 Safari）会按属性出现顺序立即发起请求，\n    // 若 `src` 在 `srcSet`/`sizes` 之前，会先请求一次再被替换，造成多余请求。\n    src: loader({ config, src, quality, width: widths[last] }),\n  };\n}\n\n/**\n * 决定要生成哪些宽度，以及 `srcSet` 描述符用 `w` 还是 `x`：\n * - 显式 `sizes`：解析其中的 `vw` 百分比，据此过滤 `deviceSizes`，用 `w`\n * - 未传 `sizes` 但传了 `width`：用 `width` / `2x`，用 `x`\n * - 都没有：直接用 `deviceSizes`，用 `w`\n */\nexport function getWidths(\n  { deviceSizes, allSizes }: ImageConfig,\n  width: number | undefined,\n  sizes: string | undefined,\n): { widths: number[]; kind: \"w\" | \"x\" } {\n  if (sizes) {\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: 上游 next 的实现，保持逐字移植\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      // 3x 屏不给 3x 图：多数标称 3x 的 OLED 屏实际只有绿色子像素是 3x，\n      // 渲染上与 2x 无差别却显著增加流量。\n      // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html\n      [width, width * 2].map(\n        (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1],\n      ),\n    ),\n  ];\n  return { widths, kind: \"x\" };\n}\n"],"mappings":";AAoBA,SAAgBA,EAAc,EAC5B,QACA,UACA,cAC2B;CAa3B,IAAIC,EAAI,WAAW,SAAS,KAAKA,EAAI,WAAW,UAAU,GACxD,OAAOA;CAGT,IAAMC,IAAS,IAAI,gBAAgB;CAInC,OAHAA,EAAO,IAAI,OAAOD,CAAG,GACrBC,EAAO,IAAI,KAAK,OAAOC,CAAK,CAAC,GACzBC,KAASF,EAAO,IAAI,KAAK,OAAOE,CAAO,CAAC,GACrC,WAAWF,EAAO,SAAS;AACpC;AAsBA,SAAgBG,EAAiB,EAC/B,WACA,QACA,gBACA,UACA,YACA,UACA,aAC+B;CAC/B,IAAIC,GACF,OAAO;EAAE;EAAK,QAAQ,KAAA;EAAW,OAAO,KAAA;CAAU;CAGpD,IAAM,EAAE,WAAQ,YAASC,EAAUC,GAAQL,GAAOM,CAAK,GACjDC,IAAOC,EAAO,SAAS;CAE7B,OAAO;EACL,OAAO,CAACF,KAASG,MAAS,MAAM,UAAUH;EAC1C,QAAQE,EACL,KACE,GAAG,MACF,GAAGE,EAAO;GAAE;GAAQ;GAAK;GAAS,OAAOC;EAAE,CAAC,EAAE,GAC5CF,MAAS,MAAME,IAAIC,IAAI,IACtBH,GACP,CAAC,CACA,KAAK,IAAI;EAIZ,KAAKC,EAAO;GAAE;GAAQ;GAAK;GAAS,OAAOF,EAAOD;EAAM,CAAC;CAC3D;AACF;AAQA,SAAgBH,EACd,EAAE,gBAAa,eACf,GACA,GACuC;CACvC,IAAIE,GAAO;EACT,IAAMO,IAAkB,sBAClBC,IAAe,CAAC;EACtB,KACE,IAAIC,GAEH,IAAQF,EAAgB,KAAKP,CAAK,IAGnC,EAAa,KAAK,OAAO,SAASS,EAAM,IAAI,EAAE,CAAC;EAEjD,IAAID,EAAa,QAAQ;GACvB,IAAME,IAAgB,KAAK,IAAI,GAAGF,CAAY,IAAI;GAClD,OAAO;IACL,QAAQG,EAAS,QAAQ,MAAMC,KAAKC,EAAY,KAAKH,CAAa;IAClE,MAAM;GACR;EACF;EACA,OAAO;GAAE,QAAQC;GAAU,MAAM;EAAI;CACvC;CAeA,OAdI,OAAOjB,KAAU,WAcd;EAAE,QAAA,CATP,GAAG,IAAI,IAIL,CAACA,GAAOA,IAAQ,CAAC,CAAC,CAAC,KAChB,MAAMiB,EAAS,MAAM,MAAMG,KAAKT,CAAC,KAAKM,EAASA,EAAS,SAAS,EACpE,CACF,CAEO;EAAQ,MAAM;CAAI,IAblB;EAAE,QAAQE;EAAa,MAAM;CAAI;AAc5C"}

package/dist/components/image/lib/static-import.d.ts

@@ -0,0 +1,14 @@
+import { StaticImageData, StaticImport, StaticRequire } from '../Image.types';
+/**
+ * 把 `width` / `height` / `quality` 这类既可传数字也可传数字字符串的输入解析成数字。
+ * - `undefined` 原样返回（表示"未提供"，与 `NaN` 表示"非法"区分开）
+ * - 纯数字字符串按十进制解析
+ * - 其它一律返回 `NaN`，由调用方决定是否抛错
+ */
+export declare function getInt(x: unknown): number | undefined;
+/** 是否是 webpack 的 `require().default` 形态 */
+export declare function isStaticRequire(src: StaticRequire | StaticImageData): src is StaticRequire;
+/** 是否已是 StaticImageData（自带 src/width/height） */
+export declare function isStaticImageData(src: StaticRequire | StaticImageData): src is StaticImageData;
+/** 是否是任何一种静态导入对象（`require()` 或 `import` 的结果） */
+export declare function isStaticImport(src: string | StaticImport): src is StaticImport;

package/dist/components/image/lib/static-import.js

@@ -0,0 +1,17 @@
+//#region src/components/image/lib/static-import.ts
+function e(e) {
+	return e === void 0 ? e : typeof e == "number" ? Number.isFinite(e) ? e : NaN : typeof e == "string" && /^[0-9]+$/.test(e) ? Number.parseInt(e, 10) : NaN;
+}
+function t(e) {
+	return e.default !== void 0;
+}
+function n(e) {
+	return e.src !== void 0;
+}
+function r(e) {
+	return !!e && typeof e == "object" && (t(e) || n(e));
+}
+//#endregion
+export { e as getInt, n as isStaticImageData, r as isStaticImport, t as isStaticRequire };
+
+//# sourceMappingURL=static-import.js.map

package/dist/components/image/lib/static-import.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-import.js","names":["getInt","x","isStaticRequire","src","isStaticImageData","isStaticImport"],"sources":["../../../../src/components/image/lib/static-import.ts"],"sourcesContent":["/**\n * 静态图片导入的识别与数值解析。\n *\n * 单一职责：只处理「src 到底是字符串还是静态导入对象」以及「宽高/quality 这类\n * 松散输入怎么解析成数字」。不涉及 loader、样式或校验。\n */\n\nimport type {\n  StaticImageData,\n  StaticImport,\n  StaticRequire,\n} from \"../Image.types\";\n\n/**\n * 把 `width` / `height` / `quality` 这类既可传数字也可传数字字符串的输入解析成数字。\n * - `undefined` 原样返回（表示\"未提供\"，与 `NaN` 表示\"非法\"区分开）\n * - 纯数字字符串按十进制解析\n * - 其它一律返回 `NaN`，由调用方决定是否抛错\n */\nexport function 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 : Number.NaN;\n  }\n  if (typeof x === \"string\" && /^[0-9]+$/.test(x)) {\n    return Number.parseInt(x, 10);\n  }\n  return Number.NaN;\n}\n\n/** 是否是 webpack 的 `require().default` 形态 */\nexport function isStaticRequire(\n  src: StaticRequire | StaticImageData,\n): src is StaticRequire {\n  return (src as StaticRequire).default !== undefined;\n}\n\n/** 是否已是 StaticImageData（自带 src/width/height） */\nexport function isStaticImageData(\n  src: StaticRequire | StaticImageData,\n): src is StaticImageData {\n  return (src as StaticImageData).src !== undefined;\n}\n\n/** 是否是任何一种静态导入对象（`require()` 或 `import` 的结果） */\nexport function isStaticImport(\n  src: string | StaticImport,\n): src is StaticImport {\n  return (\n    !!src &&\n    typeof src === \"object\" &&\n    (isStaticRequire(src as StaticImport) ||\n      isStaticImageData(src as StaticImport))\n  );\n}\n"],"mappings":";AAmBA,SAAgBA,EAAO,GAAgC;CAUrD,OATWC,MAAM,SACRA,IAEL,OAAOA,KAAM,WACR,OAAO,SAASA,CAAC,IAAIA,IAAI,MAE9B,OAAOA,KAAM,YAAY,WAAW,KAAKA,CAAC,IACrC,OAAO,SAASA,GAAG,EAAE,IAEvB;AACT;AAGA,SAAgBC,EACd,GACsB;CACtB,OAAQC,EAAsB,YAAY,KAAA;AAC5C;AAGA,SAAgBC,EACd,GACwB;CACxB,OAAQD,EAAwB,QAAQ,KAAA;AAC1C;AAGA,SAAgBE,EACd,GACqB;CACrB,OACE,CAAC,CAACF,KACF,OAAOA,KAAQ,aACdD,EAAgBC,CAAmB,KAClCC,EAAkBD,CAAmB;AAE3C"}