@neut/ui 0.0.12 → 0.0.14

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":";;;AAwCA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACA,GACA,GACM;CACN,IAAM,IAAM,GAAK;CAEb,CAAC,KAAO,EAAI,uBAAuB,MACvC,EAAI,qBAAqB,IAEA,YAAY,IAAM,EAAI,OAAO,IAAI,QAAQ,QAAQ,EAAA,CAExE,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW;EAEvB,OAAC,EAAI,iBAAiB,CAAC,EAAI,cAM/B;OAJI,MAAgB,WAClB,EAAgB,EAAI,GAGlB,GAAQ;IACV,IAAM,IAAQ,IAAI,MAAM,MAAM;IAE9B,AADA,OAAO,eAAe,GAAO,UAAU;KAAE,UAAU;KAAO,OAAO;IAAI,CAAC,GACtE,EACE,CACF;GACF;GAEA,AAAI,KACF,EAAkB,CAAG;EAHvB;CAUF,CAAC;AACH;AAsEA,IAAM,IAAiC;CACrC;CACA;CACA;CACA;CACA,KAAA;AACF;AAQA,SAAgB,EACd,GACA,EAAE,YAAS,iBAAc,kBACT;CAChB,IAAM,IAAS,EACb;EAEE,MAAM;EACN,UAAU;EACV,SAAS;EACT,aAAa;EACb,aAAa,EAAQ;EACrB,UAAU;CACZ,GACA,CACF,GACM,CAAC,GAAO,KAAU,EAAW,GAAQ;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAEG,GACE,IAAI,KAAW;CAErB,IAAI,cAAc,GAChB,IAAS;MACJ;EACL,IAAM,IAAW,CAAC,GAAG,EAAE,aAAa,GAAG,EAAE,UAAU,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,GACnE,IAAc,EAAE,YAAY,MAAM,GAAG,MAAM,IAAI,CAAC,GAChD,IAAY,EAAE,WAAW,MAAM,GAAG,MAAM,IAAI,CAAC;EACnD,IAAS;GAAE,GAAG;GAAG;GAAU;GAAa;EAAU;CACpD;CAEA,IAAW,MAAkB,QAC3B,MAAU,MACR,uIACF;CAGF,IAAI,IAAQ,EAAM,OACd,IAAQ,EAAM,OACd,IAAO,EAAM,MAEX,IAAgC,EAAM,UAAU;CAEtD,IAAI,EAAM,QAAQ;EAChB,AAAI,EAAM,WAAW,WACnB,IAAO;EAET,IAAM,IAAoE;GACxE,WAAW;IAAE,UAAU;IAAQ,QAAQ;GAAO;GAC9C,YAAY;IAAE,OAAO;IAAQ,QAAQ;GAAO;EAC9C,GACM,IAAoD;GACxD,YAAY;GACZ,MAAM;EACR,GACM,IAAc,EAAc,EAAM;EACxC,AAAI,MACF,IAAQ;GAAE,GAAG;GAAO,GAAG;EAAY;EAErC,IAAM,IAAc,EAAc,EAAM;EACxC,AAAI,KAAe,CAAC,MAClB,IAAQ;CAEZ;CAEA,IAAI,IAAY,IACZ,IAAc,EAAM,aACpB,IAAW,EAAO,EAAM,KAAK,GAC7B,IAAY,EAAO,EAAM,MAAM,GAC/B,GACA;CAEJ,IAAI,EAAe,EAAM,GAAG,GAAG;EAC7B,IAAM,IAAkB,EAAgB,EAAM,GAAG,IAC7C,EAAM,IAAI,UACV,EAAM;EAEV,IAAI,CAAC,EAAgB,KACnB,MAAU,MACR,8IAA8I,KAAK,UACjJ,CACF,GACF;EAEF,IAAI,CAAC,EAAgB,UAAU,CAAC,EAAgB,OAC9C,MAAU,MACR,2JAA2J,KAAK,UAC9J,CACF,GACF;EAQF,IALA,IAAY,EAAgB,WAC5B,IAAa,EAAgB,YAC7B,MAA6B,EAAgB,aAC7C,IAAY,EAAgB,KAExB,CAAC,GACC;OAAA,CAAC,KAAY,CAAC,GAEhB,AADA,IAAW,EAAgB,OAC3B,IAAY,EAAgB;QACvB,IAAI,KAAY,CAAC,GAAW;IACjC,IAAM,IAAQ,IAAW,EAAgB;IACzC,IAAY,KAAK,MAAM,EAAgB,SAAS,CAAK;GACvD,OAAO,IAAI,CAAC,KAAY,GAAW;IACjC,IAAM,IAAQ,IAAY,EAAgB;IAC1C,IAAW,KAAK,MAAM,EAAgB,QAAQ,CAAK;GACrD;;CAEJ;CACA,IAAM,IAAM,OAAO,EAAM,OAAQ,WAAW,EAAM,MAAM,GAEpD,IAAc,EAAM,aACpB,IACF,CAAC,EAAM,YACP,CAAC,EAAM,YACN,EAAM,YAAY,UAAiB,EAAM,YAAY;CASxD,CARI,CAAC,KAAO,EAAI,WAAW,OAAO,KAAK,EAAI,WAAW,OAAO,OAE3D,IAAc,IACd,IAAS,KAEP,EAAO,gBACT,IAAc,KAEZ,CAAC,EAAO,uBAAuB,EAAI,MAAM,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,MAGrE,IAAc;CAGhB,IAAM,IAAa,EAAO,EAAM,OAAO,GAiOjC,IAAW,OAAO,OACtB,IACI;EACE,UAAU;EACV,QAAQ;EACR,OAAO;EACP,MAAM;EACN,KAAK;EACL,OAAO;EACP,QAAQ;EACR,WAAW,EAAM;EACjB,gBAAgB,EAAM;CACxB,IACA,CAAC,GACL,IAAc,CAAC,IAAI,EAAE,OAAO,cAAc,GAC1C,CACF,GAEM,IACJ,CAAC,KAAgB,EAAM,gBAAgB,UACnC,EAAM,gBAAgB,SACpB,yCAAyC,EAAgB;EACvD;EACA;EACA;EACA;EACA,aAAa,KAAe;EAC5B,WAAW,EAAS;CACtB,CAAC,EAAE,MACH,QAAQ,EAAM,YAAY,MAC5B,MAEA,IAAkB,EAA+B,SACrD,EAAS,SACX,IAEI,EAAS,cAAc,SACrB,cACA,UAHF,EAAS,WAKP,IAAqC,IACvC;EACE,mBAAmB;EACnB,uBAAuB,EAAS,kBAAkB;EAClD,qBAAqB;EACrB,oBAAoB;CACtB,IACA,CAAC,GAeC,IAAgB,EAAiB;EACrC;EACA;EACA;EACA,OAAO;EACP,SAAS;EACT;EACA;CACF,CAAC,GAEK,IAAe,IAAS,SAAS,EAAM;CAsC7C,OAAO;EAAE,OAAO;GAlBd,GAAG;GACH,SAAS;GACT,eAAe,EAAM;GACrB,OAAO;GACP,QAAQ;GACR,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,OAAO;IAAE,GAAG;IAAU,GAAG;GAAiB;GAC1C,OAAO,EAAc;GACrB,QAAQ,EAAc;GACtB,KAAK,EAAM,eAAe,EAAc;EAQ1B;EAAU,MAAA;GALxB;GACA,SAAS,EAAM,WAAW,EAAM;GAChC,aAAa,EAAM;GACnB;EAEwB;CAAK;AACjC;AAEA,SAAS,EAAc,EAAE,QAAK,UAAO,cAAqC;CAcxE,IAAI,EAAI,WAAW,SAAS,KAAK,EAAI,WAAW,UAAU,GACxD,OAAO;CAIT,IAAM,IAAS,IAAI,gBAAgB;CAInC,OAHA,EAAO,IAAI,OAAO,CAAG,GACrB,EAAO,IAAI,KAAK,OAAO,CAAK,CAAC,GACzB,KAAS,EAAO,IAAI,KAAK,OAAO,CAAO,CAAC,GACrC,WAAW,EAAO,SAAS;AACpC;AAEA,SAAS,EAAO,GAAgC;CAU9C,OATW,MAAM,SACR,IAEL,OAAO,KAAM,WACR,OAAO,SAAS,CAAC,IAAI,IAAI,MAE9B,OAAO,KAAM,YAAY,WAAW,KAAK,CAAC,IACrC,SAAS,GAAG,EAAE,IAEhB;AACT;AAEA,SAAS,EACP,GACsB;CACtB,OAAQ,EAAsB,YAAY,KAAA;AAC5C;AAEA,SAAS,EACP,GACwB;CACxB,OAAQ,EAAwB,QAAQ,KAAA;AAC1C;AAEA,SAAS,EAAe,GAAiD;CACvE,OACE,CAAC,CAAC,KACF,OAAO,KAAQ,aACd,EAAgB,CAAmB,KAClC,EAAkB,CAAmB;AAE3C;AAEA,SAAS,EAAgB,EACvB,aACA,cACA,cACA,eACA,gBACA,gBAQS;CACT,IACM,IAAW,IAAY,IAAY,KAAK,GACxC,IAAY,IAAa,IAAa,KAAK,GAE3C,IACJ,KAAY,IAAY,gBAAgB,EAAS,GAAG,EAAU,KAAK;CASrE,OAAO,6CAA6C,EAAQ,ybARhC,IACxB,SACA,MAAc,YACZ,aACA,MAAc,UACZ,mBACA,OAEygB,qCAAqC,EAAY;AACpkB;AAkBA,SAAS,EAAiB,EACxB,WACA,QACA,gBACA,UACA,YACA,UACA,aACqC;CACrC,IAAI,GACF,OAAO;EAAE;EAAK,QAAQ,KAAA;EAAW,OAAO,KAAA;CAAU;CAGpD,IAAM,EAAE,WAAQ,YAAS,EAAU,GAAQ,GAAO,CAAK,GACjD,IAAO,EAAO,SAAS;CAE7B,OAAO;EACL,OAAO,CAAC,KAAS,MAAS,MAAM,UAAU;EAC1C,QAAQ,EACL,KACE,GAAG,MACF,GAAG,EAAO;GAAE;GAAQ;GAAK;GAAS,OAAO;EAAE,CAAC,EAAE,GAC5C,MAAS,MAAM,IAAI,IAAI,IACtB,GACP,CAAC,CACA,KAAK,IAAI;EAQZ,KAAK,EAAO;GAAE;GAAQ;GAAK;GAAS,OAAO,EAAO;EAAM,CAAC;CAC3D;AACF;AAEA,SAAS,EACP,EAAE,gBAAa,eACf,GACA,GACuC;CACvC,IAAI,GAAO;EAET,IAAM,IAAkB,sBAClB,IAAe,CAAC;EACtB,KACE,IAAI,GAEH,IAAQ,EAAgB,KAAK,CAAK,IAGnC,EAAa,KAAK,OAAO,SAAS,EAAM,IAAI,EAAE,CAAC;EAEjD,IAAI,EAAa,QAAQ;GACvB,IAAM,IAAgB,KAAK,IAAI,GAAG,CAAY,IAAI;GAClD,OAAO;IACL,QAAQ,EAAS,QAAQ,MAAM,KAAK,EAAY,KAAK,CAAa;IAClE,MAAM;GACR;EACF;EACA,OAAO;GAAE,QAAQ;GAAU,MAAM;EAAI;CACvC;CAoBA,OAnBI,OAAO,KAAU,WAmBd;EAAE,QAAA,CAdP,GAAG,IAAI,IASL,CAAC,GAAO,IAAQ,CAAiB,CAAC,CAAC,KAChC,MAAM,EAAS,MAAM,MAAM,KAAK,CAAC,KAAK,EAAS,EAAS,SAAS,EACpE,CACF,CAEO;EAAQ,MAAM;CAAI,IAlBlB;EAAE,QAAQ;EAAa,MAAM;CAAI;AAmB5C"}
+{"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/popover/Popover/Popover.context.d.ts

@@ -0,0 +1,3 @@
+import { PopoverContextValue } from './Popover.types';
+export declare const PopoverContext: import('solid-js').Context<PopoverContextValue | undefined>;
+export declare function usePopoverContext(component: string): PopoverContextValue;

package/dist/components/popover/Popover/Popover.context.js

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as t } from "solid-js";
+//#region src/components/popover/Popover/Popover.context.ts
+var n = e();
+function r(e) {
+	let r = t(n);
+	if (!r) throw Error(`<${e}> 必须渲染在 <Popover> 内部`);
+	return r;
+}
+//#endregion
+export { n as PopoverContext, r as usePopoverContext };
+
+//# sourceMappingURL=Popover.context.js.map

package/dist/components/popover/Popover/Popover.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.context.js","names":[],"sources":["../../../../src/components/popover/Popover/Popover.context.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\nimport type { PopoverContextValue } from \"./Popover.types\";\n\nexport const PopoverContext = createContext<PopoverContextValue>();\n\nexport function usePopoverContext(component: string): PopoverContextValue {\n  const ctx = useContext(PopoverContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <Popover> 内部`);\n  }\n  return ctx;\n}\n"],"mappings":";;AAGA,IAAa,IAAiB,EAAmC;AAEjE,SAAgB,EAAkB,GAAwC;CACxE,IAAM,IAAM,EAAW,CAAc;CACrC,IAAI,CAAC,GACH,MAAU,MAAM,IAAI,EAAU,qBAAqB;CAErD,OAAO;AACT"}

package/dist/components/popover/Popover/Popover.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'solid-js';
+import { PopoverProps } from './Popover.types';
+/**
+ * Popover 根组件：不渲染任何 DOM，只负责状态管理 + 提供 context。
+ * 真正的展示交给 <PopoverTrigger>/<PopoverContent>。
+ *
+ * 这是 shadcn Base UI 版本 Popover 的 SolidJS 移植：Base UI 的 Root 同样不渲染
+ * 自己的 HTML 元素，只作为状态容器使用。
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>打开</PopoverTrigger>
+ *   <PopoverContent>内容</PopoverContent>
+ * </Popover>
+ * ```
+ */
+export declare function Popover(props: PopoverProps): JSX.Element;

package/dist/components/popover/Popover/Popover.js

@@ -0,0 +1,37 @@
+import { PopoverContext as e } from "./Popover.context.js";
+import { createComponent as t } from "solid-js/web";
+import { createMemo as n, createSignal as r, createUniqueId as i } from "solid-js";
+//#region src/components/popover/Popover/Popover.tsx
+function a(a) {
+	let [o, s] = r(a.defaultOpen ?? !1), c = n(() => a.open === void 0 ? o() : a.open), l = n(() => !!a.disabled), u = n(() => !!a.modal), [d, f] = r(), [p, m] = r(), h = (e) => {
+		a.open === void 0 && s(e), a.onOpenChange?.(e);
+	}, g = {
+		open: c,
+		disabled: l,
+		modal: u,
+		contentId: `popover-${i()}`,
+		reference: d,
+		setReference: f,
+		floating: p,
+		setFloating: m,
+		openPopover: () => {
+			l() || h(!0);
+		},
+		closePopover: () => {
+			h(!1);
+		},
+		togglePopover: () => {
+			l() || h(!c());
+		}
+	};
+	return t(e.Provider, {
+		value: g,
+		get children() {
+			return a.children;
+		}
+	});
+}
+//#endregion
+export { a as Popover };
+
+//# sourceMappingURL=Popover.js.map

package/dist/components/popover/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["createMemo","createSignal","createUniqueId","JSX","PopoverContext","PopoverContextValue","PopoverProps","Popover","props","Element","internalOpen","setInternalOpen","defaultOpen","open","undefined","disabled","modal","reference","setReference","floating","setFloating","HTMLElement","commit","next","onOpenChange","openPopover","closePopover","togglePopover","contentId","ctx","_$createComponent","Provider","value","children"],"sources":["../../../../src/components/popover/Popover/Popover.tsx"],"sourcesContent":["import { createMemo, createSignal, createUniqueId, type JSX } from \"solid-js\";\nimport { PopoverContext } from \"./Popover.context\";\nimport type { PopoverContextValue, PopoverProps } from \"./Popover.types\";\n\n/**\n * Popover 根组件：不渲染任何 DOM，只负责状态管理 + 提供 context。\n * 真正的展示交给 <PopoverTrigger>/<PopoverContent>。\n *\n * 这是 shadcn Base UI 版本 Popover 的 SolidJS 移植：Base UI 的 Root 同样不渲染\n * 自己的 HTML 元素，只作为状态容器使用。\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>打开</PopoverTrigger>\n *   <PopoverContent>内容</PopoverContent>\n * </Popover>\n * ```\n */\nexport function Popover(props: PopoverProps): JSX.Element {\n  const [internalOpen, setInternalOpen] = createSignal(\n    props.defaultOpen ?? false,\n  );\n  const open = createMemo(() =>\n    props.open !== undefined ? props.open : internalOpen(),\n  );\n  const disabled = createMemo(() => !!props.disabled);\n  const modal = createMemo(() => !!props.modal);\n\n  const [reference, setReference] = createSignal<Element>();\n  const [floating, setFloating] = createSignal<HTMLElement>();\n\n  const commit = (next: boolean) => {\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n\n  const openPopover = () => {\n    if (disabled()) return;\n    commit(true);\n  };\n\n  const closePopover = () => {\n    commit(false);\n  };\n\n  const togglePopover = () => {\n    if (disabled()) return;\n    commit(!open());\n  };\n\n  const contentId = `popover-${createUniqueId()}`;\n\n  const ctx: PopoverContextValue = {\n    open,\n    disabled,\n    modal,\n    contentId,\n    reference,\n    setReference,\n    floating,\n    setFloating,\n    openPopover,\n    closePopover,\n    togglePopover,\n  };\n\n  return (\n    <PopoverContext.Provider value={ctx}>\n      {props.children}\n    </PopoverContext.Provider>\n  );\n}\n"],"mappings":";;;;AAmBA,SAAgBO,EAAQC,GAAkC;CACxD,IAAM,CAACE,GAAcC,KAAmBV,EACtCO,EAAMI,eAAe,EACvB,GACMC,IAAOb,QACXQ,EAAMK,SAASC,KAAAA,IAAyBJ,EAAa,IAA1BF,EAAMK,IACnC,GACME,IAAWf,QAAiB,CAAC,CAACQ,EAAMO,QAAQ,GAC5CC,IAAQhB,QAAiB,CAAC,CAACQ,EAAMQ,KAAK,GAEtC,CAACC,GAAWC,KAAgBjB,EAAsB,GAClD,CAACkB,GAAUC,KAAenB,EAA0B,GAEpDqB,KAAUC,MAAkB;EAEhCf,AADIA,EAAMK,SAASC,KAAAA,KAAWH,EAAgBY,CAAI,GAClDf,EAAMgB,eAAeD,CAAI;CAC3B,GAkBMM,IAA2B;EAC/BhB;EACAE;EACAC;EACAY,WAAAA,WAN2B1B,EAAe;EAO1Ce;EACAC;EACAC;EACAC;EACAK,mBAzBwB;GACpBV,EAAS,KACbO,EAAO,EAAI;EACb;EAuBEI,oBArByB;GACzBJ,EAAO,EAAK;EACd;EAoBEK,qBAlB0B;GACtBZ,EAAS,KACbO,EAAO,CAACT,EAAK,CAAC;EAChB;CAgBA;CAEA,OAAAiB,EACG1B,EAAe2B,UAAQ;EAACC,OAAOH;EAAG,IAAAI,WAAA;GAAA,OAChCzB,EAAMyB;EAAQ;CAAA,CAAA;AAGrB"}

package/dist/components/popover/Popover/Popover.types.d.ts

@@ -0,0 +1,24 @@
+import { Accessor, ParentProps } from 'solid-js';
+export interface PopoverProps extends ParentProps {
+    /** 受控打开状态；不传则内部自管理（非受控模式） */
+    open?: boolean;
+    /** 非受控模式下的初始打开状态 */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** 是否启用 modal 模式（当前仅透传，不实现焦点陷阱） */
+    modal?: boolean;
+}
+export interface PopoverContextValue {
+    open: Accessor<boolean>;
+    disabled: Accessor<boolean>;
+    modal: Accessor<boolean>;
+    contentId: string;
+    reference: Accessor<Element | undefined>;
+    setReference: (el: Element | undefined) => void;
+    floating: Accessor<HTMLElement | undefined>;
+    setFloating: (el: HTMLElement | undefined) => void;
+    openPopover: () => void;
+    closePopover: () => void;
+    togglePopover: () => void;
+}

package/dist/components/popover/Popover/index.d.ts

@@ -0,0 +1,3 @@
+export { Popover } from './Popover';
+export { PopoverContext, usePopoverContext } from './Popover.context';
+export type { PopoverProps, PopoverContextValue } from './Popover.types';

package/dist/components/popover/PopoverContent/PopoverContent.d.ts

@@ -0,0 +1,6 @@
+import { PopoverContentProps } from './PopoverContent.types';
+/**
+ * Popover 的浮层内容。挂 Portal 到 body，用 position:fixed 定位。
+ * 当前实现打开时挂载、关闭时直接卸载；进场动画由 data-open + RAF 驱动。
+ */
+export declare function PopoverContent(props: PopoverContentProps): import("solid-js").JSX.Element;

package/dist/components/popover/PopoverContent/PopoverContent.js

@@ -0,0 +1,72 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { getAlignment as t, getSide as n } from "../../../lib/positioner/core/placement.js";
+import { getPopoverTransformOrigin as r } from "./PopoverContent.utils.js";
+import { usePopoverContent as i } from "./usePopoverContent.js";
+import { Portal as a, createComponent as o, effect as s, insert as c, mergeProps as l, setAttribute as u, spread as d, style as f, template as p, use as m } from "solid-js/web";
+import { Show as h, onCleanup as g, splitProps as _ } from "solid-js";
+//#region src/components/popover/PopoverContent/PopoverContent.tsx
+var v = /*#__PURE__*/ p("<div style=z-index:50><div role=dialog data-slot=popover-content>");
+function y(p) {
+	let { ctx: y, pos: b, animationState: x } = i(() => p), [S, C] = _(p, [
+		"side",
+		"align",
+		"sideOffset",
+		"alignOffset",
+		"collisionPadding",
+		"class",
+		"classList",
+		"style",
+		"children"
+	]);
+	return o(h, {
+		get when() {
+			return y.open();
+		},
+		get children() {
+			return o(a, { get children() {
+				var i = v(), a = i.firstChild;
+				return m((e) => {
+					y.setFloating(e), g(() => y.setFloating(void 0));
+				}, i), d(a, l({
+					get id() {
+						return y.contentId;
+					},
+					get "data-open"() {
+						return x() === "open" ? "" : void 0;
+					},
+					get "data-closed"() {
+						return x() === "closed" ? "" : void 0;
+					},
+					get "data-side"() {
+						return n(b.placement());
+					},
+					get "data-align"() {
+						return t(b.placement()) ?? "center";
+					},
+					get style() {
+						return {
+							"transform-origin": r(b.placement()),
+							...typeof S.style == "object" ? S.style : void 0
+						};
+					},
+					get class() {
+						return e("z-50 flex w-72 flex-col gap-2.5 overflow-hidden rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", S.class);
+					}
+				}, C), !1, !0), c(a, () => S.children), s((e) => {
+					var t = b.placement(), n = {
+						...b.floatingStyles(),
+						opacity: +!!b.isPositioned()
+					};
+					return t !== e.e && u(i, "data-placement", e.e = t), e.t = f(i, n, e.t), e;
+				}, {
+					e: void 0,
+					t: void 0
+				}), i;
+			} });
+		}
+	});
+}
+//#endregion
+export { y as PopoverContent };
+
+//# sourceMappingURL=PopoverContent.js.map

package/dist/components/popover/PopoverContent/PopoverContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.js","names":["Show","onCleanup","splitProps","Portal","clsx","getAlignment","getSide","usePopoverContent","getPopoverTransformOrigin","PopoverContentProps","PopoverContent","props","ctx","pos","animationState","local","rest","_$createComponent","when","open","children","_el$","_tmpl$","_el$2","firstChild","_$use","el","setFloating","undefined","_$spread","_$mergeProps","id","contentId","data-open","data-closed","data-side","placement","data-align","style","class","_$insert","_$effect","_p$","_v$","_v$2","floatingStyles","opacity","isPositioned","e","_$setAttribute","t","_$style"],"sources":["../../../../src/components/popover/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import { Show, onCleanup, splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { clsx } from \"~/utils\";\nimport { getAlignment, getSide } from \"~/lib\";\nimport { usePopoverContent } from \"./usePopoverContent\";\nimport { getPopoverTransformOrigin } from \"./PopoverContent.utils\";\nimport type { PopoverContentProps } from \"./PopoverContent.types\";\n\n/**\n * Popover 的浮层内容。挂 Portal 到 body，用 position:fixed 定位。\n * 当前实现打开时挂载、关闭时直接卸载；进场动画由 data-open + RAF 驱动。\n */\nexport function PopoverContent(props: PopoverContentProps) {\n  const { ctx, pos, animationState } = usePopoverContent(() => props);\n\n  const [local, rest] = splitProps(props, [\n    \"side\",\n    \"align\",\n    \"sideOffset\",\n    \"alignOffset\",\n    \"collisionPadding\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"children\",\n  ]);\n\n  return (\n    <Show when={ctx.open()}>\n      <Portal>\n        {/*\n          外层：只负责定位（position:fixed 来自 floatingStyles），不参与动画。\n          内层：真正的视觉样式 + 进出场动画。分层的原因和 Select/Tooltip 相同：\n          同一个元素不能同时用 transform 做定位和做动画。\n        */}\n        <div\n          ref={(el) => {\n            ctx.setFloating(el);\n            onCleanup(() => ctx.setFloating(undefined));\n          }}\n          data-placement={pos.placement()}\n          style={{\n            ...pos.floatingStyles(),\n            \"z-index\": 50,\n            opacity: pos.isPositioned() ? 1 : 0,\n          }}\n        >\n          <div\n            id={ctx.contentId}\n            role=\"dialog\"\n            data-slot=\"popover-content\"\n            data-open={animationState() === \"open\" ? \"\" : undefined}\n            data-closed={animationState() === \"closed\" ? \"\" : undefined}\n            data-side={getSide(pos.placement())}\n            data-align={getAlignment(pos.placement()) ?? \"center\"}\n            style={{\n              \"transform-origin\": getPopoverTransformOrigin(pos.placement()),\n              ...(typeof local.style === \"object\" ? local.style : undefined),\n            }}\n            class={clsx(\n              \"z-50 flex w-72 flex-col gap-2.5 overflow-hidden rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100\",\n              \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n              \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n              \"data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n              local.class,\n            )}\n            {...rest}\n          >\n            {local.children}\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgBU,EAAeC,GAA4B;CACzD,IAAM,EAAEC,QAAKC,QAAKC,sBAAmBP,QAAwBI,CAAK,GAE5D,CAACI,GAAOC,KAAQd,EAAWS,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,OAAAM,EACGjB,GAAI;EAAA,IAACkB,OAAI;GAAA,OAAEN,EAAIO,KAAK;EAAC;EAAA,IAAAC,WAAA;GAAA,OAAAH,EACnBd,GAAM,EAAA,IAAAiB,WAAA;IAAA,IAAAC,IAAAC,EAAA,GAAAC,IAAAF,EAAAG;IAgBF,OAhBEC,GAOGC,MAAO;KAEXzB,AADAW,EAAIe,YAAYD,CAAE,GAClBzB,QAAgBW,EAAIe,YAAYC,KAAAA,CAAS,CAAC;IAC5C,GAACP,CAAA,GAAAQ,EAAAN,GAAAO,EAAA;KAAA,IASCC,KAAE;MAAA,OAAEnB,EAAIoB;KAAS;KAAA,IAAA,cAAA;MAAA,OAGNlB,EAAe,MAAM,SAAS,KAAKc,KAAAA;KAAS;KAAA,IAAA,gBAAA;MAAA,OAC1Cd,EAAe,MAAM,WAAW,KAAKc,KAAAA;KAAS;KAAA,IAAA,cAAA;MAAA,OAChDtB,EAAQO,EAAIuB,UAAU,CAAC;KAAC;KAAA,IAAA,eAAA;MAAA,OACvB/B,EAAaQ,EAAIuB,UAAU,CAAC,KAAK;KAAQ;KAAA,IACrDE,QAAK;MAAA,OAAE;OACL,oBAAoB9B,EAA0BK,EAAIuB,UAAU,CAAC;OAC7D,GAAI,OAAOrB,EAAMuB,SAAU,WAAWvB,EAAMuB,QAAQV,KAAAA;MACtD;KAAC;KAAA,IAAA,QAAA;MAAA,OACMxB,EACL,+KACA,+JACA,iEACA,0EACAW,EAAMwB,KACR;KAAC;IAAA,GACGvB,CAAI,GAAA,IAAA,EAAA,GAAAwB,EAAAjB,SAEPR,EAAMK,QAAQ,GAAAqB,GAAAC,MAAA;KAAA,IAAAC,IA5BD9B,EAAIuB,UAAU,GAACQ,IACxB;MACL,GAAG/B,EAAIgC,eAAe;MAEtBC,SAASjC,KAAIkC,aAAa;KAC5B;KAAC,OAAAJ,MAAAD,EAAAM,KAAAC,EAAA5B,GAAA,kBAAAqB,EAAAM,IAAAL,CAAA,GAAAD,EAAAQ,IAAAC,EAAA9B,GAAAuB,GAAAF,EAAAQ,CAAA,GAAAR;IAAA,GAAA;KAAAM,GAAApB,KAAAA;KAAAsB,GAAAtB,KAAAA;IAAA,CAAA,GAAAP;GAAA,EAAA,CAAA;EAAA;CAAA,CAAA;AA6BX"}

package/dist/components/popover/PopoverContent/PopoverContent.types.d.ts

@@ -0,0 +1,16 @@
+import { ParentProps } from 'solid-js';
+import { Alignment, Side } from '../../../lib';
+import { BaseProps } from '../../../types';
+export type PopoverSide = Side | "inline-start" | "inline-end";
+export interface PopoverContentProps extends BaseProps, ParentProps {
+    /** 贴 trigger 的哪一侧，默认 'bottom'。额外支持 Base UI 的 logical side。 */
+    side?: PopoverSide;
+    /** 沿边对齐方式，默认 'center' */
+    align?: Alignment | "center";
+    /** 沿主轴（side 指向的方向）与 trigger 之间的间距（像素），默认 4 */
+    sideOffset?: number;
+    /** 沿交叉轴（对齐方向）的偏移（像素），默认 0 */
+    alignOffset?: number;
+    /** 距视口边缘的最小间距（像素），默认 8 */
+    collisionPadding?: number;
+}

package/dist/components/popover/PopoverContent/PopoverContent.utils.d.ts

@@ -0,0 +1,20 @@
+import { Middleware, Placement } from '../../../lib';
+import { PopoverSide } from './PopoverContent.types';
+/**
+ * 把 shadcn/Base UI 风格的 side + align 拆分参数转换成核心库统一用的
+ * `Placement` 字符串。Base UI 额外支持 inline-start / inline-end 逻辑方向，
+ * 这里简单按 LTR 映射（inline-start -> left, inline-end -> right）。
+ */
+export declare function toPopoverPlacement(side: PopoverSide, align: "start" | "end" | "center"): Placement;
+/** 根据最终生效的 placement 计算缩放动画的 transform-origin。 */
+export declare function getPopoverTransformOrigin(placement: Placement): string;
+export interface BuildPopoverMiddlewareOptions {
+    sideOffset: number;
+    alignOffset: number;
+    collisionPadding: number;
+}
+/**
+ * Popover 定位管线：offset → flip → shift → hide → containingBlockOffset。
+ * 和 Tooltip 相比只少了 arrow middleware，其余策略一致。
+ */
+export declare function createPopoverMiddleware(options: BuildPopoverMiddlewareOptions): Middleware[];

package/dist/components/popover/PopoverContent/PopoverContent.utils.js

@@ -0,0 +1,36 @@
+import { getAlignment as e, getSide as t } from "../../../lib/positioner/core/placement.js";
+import { offset as n } from "../../../lib/positioner/middleware/offset.js";
+import { shift as r } from "../../../lib/positioner/middleware/shift.js";
+import { flip as i } from "../../../lib/positioner/middleware/flip.js";
+import { hide as a } from "../../../lib/positioner/middleware/hide.js";
+import { containingBlockOffset as o } from "../../../lib/positioner/middleware/containing-block-offset.js";
+//#region src/components/popover/PopoverContent/PopoverContent.utils.ts
+function s(e, t) {
+	let n = e === "inline-start" ? "left" : e === "inline-end" ? "right" : e;
+	return t === "center" ? n : `${n}-${t}`;
+}
+function c(n) {
+	let r = t(n), i = e(n), a = i === "start" ? "0%" : i === "end" ? "100%" : "50%";
+	switch (r) {
+		case "top": return `${a} 100%`;
+		case "bottom": return `${a} 0%`;
+		case "left": return `100% ${a}`;
+		case "right": return `0% ${a}`;
+	}
+}
+function l(e) {
+	return [
+		n({
+			mainAxis: e.sideOffset,
+			crossAxis: e.alignOffset
+		}),
+		i(),
+		r({ padding: e.collisionPadding }),
+		a(),
+		o()
+	];
+}
+//#endregion
+export { l as createPopoverMiddleware, c as getPopoverTransformOrigin, s as toPopoverPlacement };
+
+//# sourceMappingURL=PopoverContent.utils.js.map

package/dist/components/popover/PopoverContent/PopoverContent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.utils.js","names":[],"sources":["../../../../src/components/popover/PopoverContent/PopoverContent.utils.ts"],"sourcesContent":["import {\n  containingBlockOffset,\n  flip,\n  getAlignment,\n  getSide,\n  hide,\n  offset,\n  shift,\n  type Middleware,\n  type Placement,\n} from \"~/lib\";\nimport type { PopoverSide } from \"./PopoverContent.types\";\n\n/**\n * 把 shadcn/Base UI 风格的 side + align 拆分参数转换成核心库统一用的\n * `Placement` 字符串。Base UI 额外支持 inline-start / inline-end 逻辑方向，\n * 这里简单按 LTR 映射（inline-start -> left, inline-end -> right）。\n */\nexport function toPopoverPlacement(\n  side: PopoverSide,\n  align: \"start\" | \"end\" | \"center\",\n): Placement {\n  const physical =\n    side === \"inline-start\" ? \"left\" : side === \"inline-end\" ? \"right\" : side;\n  return align === \"center\" ? physical : (`${physical}-${align}` as Placement);\n}\n\n/** 根据最终生效的 placement 计算缩放动画的 transform-origin。 */\nexport function getPopoverTransformOrigin(placement: Placement): string {\n  const side = getSide(placement);\n  const align = getAlignment(placement);\n  const crossAxisOrigin =\n    align === \"start\" ? \"0%\" : align === \"end\" ? \"100%\" : \"50%\";\n\n  switch (side) {\n    case \"top\":\n      return `${crossAxisOrigin} 100%`;\n    case \"bottom\":\n      return `${crossAxisOrigin} 0%`;\n    case \"left\":\n      return `100% ${crossAxisOrigin}`;\n    case \"right\":\n      return `0% ${crossAxisOrigin}`;\n  }\n}\n\nexport interface BuildPopoverMiddlewareOptions {\n  sideOffset: number;\n  alignOffset: number;\n  collisionPadding: number;\n}\n\n/**\n * Popover 定位管线：offset → flip → shift → hide → containingBlockOffset。\n * 和 Tooltip 相比只少了 arrow middleware，其余策略一致。\n */\nexport function createPopoverMiddleware(\n  options: BuildPopoverMiddlewareOptions,\n): Middleware[] {\n  return [\n    offset({ mainAxis: options.sideOffset, crossAxis: options.alignOffset }),\n    flip(),\n    shift({ padding: options.collisionPadding }),\n    hide(),\n    containingBlockOffset(),\n  ];\n}\n"],"mappings":";;;;;;;AAkBA,SAAgB,EACd,GACA,GACW;CACX,IAAM,IACJ,MAAS,iBAAiB,SAAS,MAAS,eAAe,UAAU;CACvE,OAAO,MAAU,WAAW,IAAY,GAAG,EAAS,GAAG;AACzD;AAGA,SAAgB,EAA0B,GAA8B;CACtE,IAAM,IAAO,EAAQ,CAAS,GACxB,IAAQ,EAAa,CAAS,GAC9B,IACJ,MAAU,UAAU,OAAO,MAAU,QAAQ,SAAS;CAExD,QAAQ,GAAR;EACE,KAAK,OACH,OAAO,GAAG,EAAgB;EAC5B,KAAK,UACH,OAAO,GAAG,EAAgB;EAC5B,KAAK,QACH,OAAO,QAAQ;EACjB,KAAK,SACH,OAAO,MAAM;CACjB;AACF;AAYA,SAAgB,EACd,GACc;CACd,OAAO;EACL,EAAO;GAAE,UAAU,EAAQ;GAAY,WAAW,EAAQ;EAAY,CAAC;EACvE,EAAK;EACL,EAAM,EAAE,SAAS,EAAQ,iBAAiB,CAAC;EAC3C,EAAK;EACL,EAAsB;CACxB;AACF"}

package/dist/components/popover/PopoverContent/index.d.ts

@@ -0,0 +1,6 @@
+export { PopoverContent } from './PopoverContent';
+export type { PopoverContentProps, PopoverSide } from './PopoverContent.types';
+export { createPopoverMiddleware, toPopoverPlacement, } from './PopoverContent.utils';
+export type { BuildPopoverMiddlewareOptions } from './PopoverContent.utils';
+export { usePopoverContent } from './usePopoverContent';
+export type { UsePopoverContentResult } from './usePopoverContent';

package/dist/components/popover/PopoverContent/usePopoverContent.d.ts

@@ -0,0 +1,11 @@
+import { Positioner } from '../../../lib';
+import { usePopoverContext } from '../Popover/Popover.context';
+import { PopoverContentProps } from './PopoverContent.types';
+export interface UsePopoverContentResult {
+    ctx: ReturnType<typeof usePopoverContext>;
+    pos: Positioner;
+    isVisible: () => boolean;
+    /** 驱动 data-open/data-closed 的动画状态；打开时比 isVisible 晚一帧。 */
+    animationState: () => "open" | "closed";
+}
+export declare function usePopoverContent(props: () => PopoverContentProps): UsePopoverContentResult;

package/dist/components/popover/PopoverContent/usePopoverContent.js

@@ -0,0 +1,42 @@
+import { createPositioner as e } from "../../../lib/positioner/create-positioner.js";
+import { usePopoverContext as t } from "../Popover/Popover.context.js";
+import { createPopoverMiddleware as n, toPopoverPlacement as r } from "./PopoverContent.utils.js";
+import { createEffect as i, createMemo as a, createSignal as o, onCleanup as s } from "solid-js";
+//#region src/components/popover/PopoverContent/usePopoverContent.ts
+function c(c) {
+	let l = t("PopoverContent"), u = e(l.reference, l.floating, {
+		placement: () => r(c().side ?? "bottom", c().align ?? "center"),
+		strategy: "fixed",
+		middleware: () => n({
+			sideOffset: c().sideOffset ?? 4,
+			alignOffset: c().alignOffset ?? 0,
+			collisionPadding: c().collisionPadding ?? 8
+		})
+	}), d = a(() => l.open() && !u.middlewareData().hide?.referenceHidden), [f, p] = o("closed");
+	return i(() => {
+		if (d()) {
+			let e = requestAnimationFrame(() => p("open"));
+			s(() => cancelAnimationFrame(e));
+		} else p("closed");
+	}), i(() => {
+		if (!l.open()) return;
+		let e = (e) => {
+			let t = e.target;
+			!(t instanceof Element ? t : t?.parentElement)?.closest("[data-slot=\"select-content\"]") && !l.reference()?.contains(t) && !l.floating()?.contains(t) && (l.closePopover(), e.stopPropagation());
+		}, t = (e) => {
+			e.key === "Escape" && (e.preventDefault(), l.closePopover());
+		};
+		document.addEventListener("pointerdown", e, { capture: !0 }), document.addEventListener("keydown", t), s(() => {
+			document.removeEventListener("pointerdown", e, { capture: !0 }), document.removeEventListener("keydown", t);
+		});
+	}), {
+		ctx: l,
+		pos: u,
+		isVisible: d,
+		animationState: f
+	};
+}
+//#endregion
+export { c as usePopoverContent };
+
+//# sourceMappingURL=usePopoverContent.js.map

package/dist/components/popover/PopoverContent/usePopoverContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverContent.js","names":[],"sources":["../../../../src/components/popover/PopoverContent/usePopoverContent.ts"],"sourcesContent":["import { createSignal, createMemo, createEffect, onCleanup } from \"solid-js\";\nimport { createPositioner, type Positioner } from \"~/lib\";\nimport { usePopoverContext } from \"../Popover/Popover.context\";\nimport {\n  createPopoverMiddleware,\n  toPopoverPlacement,\n} from \"./PopoverContent.utils\";\nimport type { PopoverContentProps } from \"./PopoverContent.types\";\n\nexport interface UsePopoverContentResult {\n  ctx: ReturnType<typeof usePopoverContext>;\n  pos: Positioner;\n  isVisible: () => boolean;\n  /** 驱动 data-open/data-closed 的动画状态；打开时比 isVisible 晚一帧。 */\n  animationState: () => \"open\" | \"closed\";\n}\n\nexport function usePopoverContent(\n  props: () => PopoverContentProps,\n): UsePopoverContentResult {\n  const ctx = usePopoverContext(\"PopoverContent\");\n\n  const pos = createPositioner(ctx.reference, ctx.floating, {\n    placement: () =>\n      toPopoverPlacement(props().side ?? \"bottom\", props().align ?? \"center\"),\n    strategy: \"fixed\",\n    middleware: () =>\n      createPopoverMiddleware({\n        sideOffset: props().sideOffset ?? 4,\n        alignOffset: props().alignOffset ?? 0,\n        collisionPadding: props().collisionPadding ?? 8,\n      }),\n  });\n\n  const isVisible = createMemo(\n    () => ctx.open() && !pos.middlewareData().hide?.referenceHidden,\n  );\n\n  // 打开时延迟一帧再触发动画 class，给定位计算留出时间。\n  const [animationState, setAnimationState] = createSignal<\"open\" | \"closed\">(\n    \"closed\",\n  );\n\n  createEffect(() => {\n    if (isVisible()) {\n      const raf = requestAnimationFrame(() => setAnimationState(\"open\"));\n      onCleanup(() => cancelAnimationFrame(raf));\n    } else {\n      setAnimationState(\"closed\");\n    }\n  });\n\n  // 打开期间绑定 document 级监听：点击外部关闭 + Escape 关闭。\n  createEffect(() => {\n    if (!ctx.open()) return;\n\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node;\n      const targetElement =\n        target instanceof Element ? target : target?.parentElement;\n      const insideNestedFloating = !!targetElement?.closest(\n        '[data-slot=\"select-content\"]',\n      );\n      if (\n        !insideNestedFloating &&\n        !ctx.reference()?.contains(target) &&\n        !ctx.floating()?.contains(target)\n      ) {\n        ctx.closePopover();\n        e.stopPropagation();\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        ctx.closePopover();\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", onPointerDown, { capture: true });\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => {\n      document.removeEventListener(\"pointerdown\", onPointerDown, {\n        capture: true,\n      });\n      document.removeEventListener(\"keydown\", onKeyDown);\n    });\n  });\n\n  return { ctx, pos, isVisible, animationState };\n}\n"],"mappings":";;;;;AAiBA,SAAgB,EACd,GACyB;CACzB,IAAM,IAAM,EAAkB,gBAAgB,GAExC,IAAM,EAAiB,EAAI,WAAW,EAAI,UAAU;EACxD,iBACE,EAAmB,EAAM,CAAC,CAAC,QAAQ,UAAU,EAAM,CAAC,CAAC,SAAS,QAAQ;EACxE,UAAU;EACV,kBACE,EAAwB;GACtB,YAAY,EAAM,CAAC,CAAC,cAAc;GAClC,aAAa,EAAM,CAAC,CAAC,eAAe;GACpC,kBAAkB,EAAM,CAAC,CAAC,oBAAoB;EAChD,CAAC;CACL,CAAC,GAEK,IAAY,QACV,EAAI,KAAK,KAAK,CAAC,EAAI,eAAe,CAAC,CAAC,MAAM,eAClD,GAGM,CAAC,GAAgB,KAAqB,EAC1C,QACF;CAiDA,OA/CA,QAAmB;EACjB,IAAI,EAAU,GAAG;GACf,IAAM,IAAM,4BAA4B,EAAkB,MAAM,CAAC;GACjE,QAAgB,qBAAqB,CAAG,CAAC;EAC3C,OACE,EAAkB,QAAQ;CAE9B,CAAC,GAGD,QAAmB;EACjB,IAAI,CAAC,EAAI,KAAK,GAAG;EAEjB,IAAM,KAAiB,MAAoB;GACzC,IAAM,IAAS,EAAE;GAMjB,AACE,EALA,aAAkB,UAAU,IAAS,GAAQ,cAAA,EACD,QAC5C,gCACF,KAGE,CAAC,EAAI,UAAU,CAAC,EAAE,SAAS,CAAM,KACjC,CAAC,EAAI,SAAS,CAAC,EAAE,SAAS,CAAM,MAEhC,EAAI,aAAa,GACjB,EAAE,gBAAgB;EAEtB,GAEM,KAAa,MAAqB;GACtC,AAAI,EAAE,QAAQ,aACZ,EAAE,eAAe,GACjB,EAAI,aAAa;EAErB;EAIA,AAFA,SAAS,iBAAiB,eAAe,GAAe,EAAE,SAAS,GAAK,CAAC,GACzE,SAAS,iBAAiB,WAAW,CAAS,GAC9C,QAAgB;GAId,AAHA,SAAS,oBAAoB,eAAe,GAAe,EACzD,SAAS,GACX,CAAC,GACD,SAAS,oBAAoB,WAAW,CAAS;EACnD,CAAC;CACH,CAAC,GAEM;EAAE;EAAK;EAAK;EAAW;CAAe;AAC/C"}

package/dist/components/popover/PopoverDescription/PopoverDescription.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from 'solid-js';
+export declare function PopoverDescription(props: ComponentProps<"div">): import("solid-js").JSX.Element;

package/dist/components/popover/PopoverDescription/PopoverDescription.js

@@ -0,0 +1,18 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { mergeProps as t, spread as n, template as r } from "solid-js/web";
+import { splitProps as i } from "solid-js";
+//#region src/components/popover/PopoverDescription/PopoverDescription.tsx
+var a = /*#__PURE__*/ r("<div data-slot=popover-description>");
+function o(r) {
+	let [o, s] = i(r, ["class"]);
+	return (() => {
+		var r = a();
+		return n(r, t({ get class() {
+			return e("text-muted-foreground", o.class);
+		} }, s), !1, !1), r;
+	})();
+}
+//#endregion
+export { o as PopoverDescription };
+
+//# sourceMappingURL=PopoverDescription.js.map

package/dist/components/popover/PopoverDescription/PopoverDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverDescription.js","names":["splitProps","ComponentProps","clsx","PopoverDescription","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class"],"sources":["../../../../src/components/popover/PopoverDescription/PopoverDescription.tsx"],"sourcesContent":["import { splitProps } from \"solid-js\";\nimport type { ComponentProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\n\nexport function PopoverDescription(props: ComponentProps<\"div\">) {\n  const [local, rest] = splitProps(props, [\"class\"]);\n  return (\n    <div\n      data-slot=\"popover-description\"\n      class={clsx(\"text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgBG,EAAmBC,GAA8B;CAC/D,IAAM,CAACC,GAAOC,KAAQN,EAAWI,GAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAG,IAAAC,EAAA;EAIY,OAJZC,EAAAF,GAAAG,EAAA,EAAA,IAAA,QAAA;GAAA,OAGWR,EAAK,yBAAyBG,EAAMM,KAAK;EAAC,EAAA,GAC7CL,CAAI,GAAA,IAAA,EAAA,GAAAC;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/popover/PopoverDescription/index.d.ts

@@ -0,0 +1 @@
+export { PopoverDescription } from './PopoverDescription';

package/dist/components/popover/PopoverHeader/PopoverHeader.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from 'solid-js';
+export declare function PopoverHeader(props: ComponentProps<"div">): import("solid-js").JSX.Element;

package/dist/components/popover/PopoverHeader/PopoverHeader.js

@@ -0,0 +1,18 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { mergeProps as t, spread as n, template as r } from "solid-js/web";
+import { splitProps as i } from "solid-js";
+//#region src/components/popover/PopoverHeader/PopoverHeader.tsx
+var a = /*#__PURE__*/ r("<div data-slot=popover-header>");
+function o(r) {
+	let [o, s] = i(r, ["class"]);
+	return (() => {
+		var r = a();
+		return n(r, t({ get class() {
+			return e("flex flex-col gap-0.5 text-sm", o.class);
+		} }, s), !1, !1), r;
+	})();
+}
+//#endregion
+export { o as PopoverHeader };
+
+//# sourceMappingURL=PopoverHeader.js.map