@01.software/sdk 0.5.4 → 0.5.5

package/dist/ui/image.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/Image/index.tsx","../../src/utils/image.ts"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport type { CSSProperties } from 'react'\nimport type { ImageData } from '../../utils/image'\nimport { getImageSrcSet, getImagePlaceholderStyle } from '../../utils/image'\n\nexport interface ImageProps {\n  /** Payload image document */\n  image: ImageData\n  /** Display width in CSS pixels (for selecting optimal srcset size) */\n  width?: number\n  /** Device pixel ratio (default: 1) */\n  dpr?: number\n  /** Placeholder strategy (default: 'blur'; defaults to 'none' when imageRendering is 'pixelated' or 'crisp-edges') */\n  placeholder?: 'blur' | 'color' | 'none'\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: CSSProperties\n  /** Inner `<img>` className */\n  imgClassName?: string\n  /** Inner `<img>` style */\n  imgStyle?: CSSProperties\n  /** HTML sizes attribute */\n  sizes?: string\n  /** Loading strategy (default: 'lazy'; automatically 'eager' when priority is true) */\n  loading?: 'lazy' | 'eager'\n  /** Callback when image finishes loading */\n  onLoad?: () => void\n  /** Object-fit for the image (default: 'cover') */\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\n  /** When true, loads eagerly with high fetch priority (for LCP images) */\n  priority?: boolean\n  /** When true, fills parent container (width/height: 100%, no aspect ratio) */\n  fill?: boolean\n  /** CSS image-rendering mode (e.g. 'pixelated' for pixel art) */\n  imageRendering?: 'auto' | 'pixelated' | 'crisp-edges'\n}\n\n/**\n * Image component with blur-up / color placeholder support.\n *\n * Uses LQIP (Low Quality Image Placeholder) for a smooth blur-up effect,\n * falling back to palette color or no placeholder.\n */\nexport function Image({\n  image,\n  width,\n  dpr = 1,\n  placeholder: placeholderProp,\n  className,\n  style,\n  imgClassName,\n  imgStyle,\n  sizes,\n  loading: loadingProp,\n  onLoad,\n  objectFit = 'cover',\n  priority = false,\n  fill = false,\n  imageRendering,\n}: ImageProps) {\n  const [loaded, setLoaded] = useState(false)\n  const firedRef = useRef(false)\n\n  // Resolve defaults based on other props\n  const isPixelRendering =\n    imageRendering === 'pixelated' || imageRendering === 'crisp-edges'\n  const placeholder = placeholderProp ?? (isPixelRendering ? 'none' : 'blur')\n  const loading = priority ? 'eager' : (loadingProp ?? 'lazy')\n\n  const aspectRatio =\n    !fill && image.width && image.height\n      ? `${image.width} / ${image.height}`\n      : undefined\n\n  const srcSet = getImageSrcSet(image)\n  const src = image.url ?? undefined\n\n  // Placeholder: LQIP overlay or color overlay (mutually exclusive)\n  const hasLqip = placeholder === 'blur' && !!image.lqip\n  const placeholderStyle = getImagePlaceholderStyle(image, {\n    type: placeholder,\n  })\n  const placeholderColor =\n    !hasLqip && 'backgroundColor' in placeholderStyle\n      ? placeholderStyle.backgroundColor\n      : undefined\n\n  const fireLoad = useCallback(() => {\n    if (firedRef.current) return\n    firedRef.current = true\n    setLoaded(true)\n    onLoad?.()\n  }, [onLoad])\n\n  // Callback ref: detect SSR-cached images that are already loaded\n  const imgRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      if (node && node.complete && node.naturalWidth > 0) {\n        fireLoad()\n      }\n    },\n    [fireLoad],\n  )\n\n  // Container styles\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    overflow: 'hidden',\n    ...(fill ? { width: '100%', height: '100%' } : {}),\n    ...(aspectRatio ? { aspectRatio } : {}),\n    ...style,\n  }\n\n  // Shared overlay styles (LQIP and color)\n  const overlayBase: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    opacity: loaded ? 0 : 1,\n    transition: 'opacity 0.3s ease',\n    pointerEvents: 'none',\n  }\n\n  // Main image styles\n  const mainImgStyle: CSSProperties = {\n    display: 'block',\n    width: '100%',\n    height: '100%',\n    objectFit,\n    ...(imageRendering ? { imageRendering } : {}),\n    opacity: loaded ? 1 : 0,\n    transition: 'opacity 0.3s ease',\n    ...imgStyle,\n  }\n\n  return (\n    <div className={className} style={containerStyle}>\n      {hasLqip && (\n        <img\n          aria-hidden\n          alt=\"\"\n          src={image.lqip!}\n          style={{\n            ...overlayBase,\n            display: 'block',\n            objectFit,\n            filter: 'blur(20px)',\n            transform: 'scale(1.1)',\n          }}\n        />\n      )}\n      {placeholderColor && (\n        <div\n          aria-hidden\n          style={{\n            ...overlayBase,\n            backgroundColor: placeholderColor,\n          }}\n        />\n      )}\n      <img\n        ref={imgRef}\n        alt={image.alt ?? ''}\n        src={src}\n        srcSet={srcSet || undefined}\n        sizes={sizes}\n        width={width ? width * dpr : undefined}\n        loading={loading}\n        decoding=\"async\"\n        fetchPriority={priority ? 'high' : undefined}\n        onLoad={fireLoad}\n        className={imgClassName}\n        style={mainImgStyle}\n      />\n    </div>\n  )\n}\n","/** Palette colors extracted from an image */\nexport interface ImagePalette {\n  vibrant?: string | null\n  muted?: string | null\n  darkVibrant?: string | null\n  darkMuted?: string | null\n  lightVibrant?: string | null\n  lightMuted?: string | null\n}\n\n/** Common image data shape from Payload CMS upload collections */\nexport interface ImageData {\n  url?: string | null\n  width?: number | null\n  height?: number | null\n  alt?: string | null\n  lqip?: string | null\n  palette?: ImagePalette | null\n  sizes?: Record<\n    string,\n    | {\n        url?: string | null\n        width?: number | null\n        height?: number | null\n      }\n    | undefined\n  >\n}\n\n/** Pre-generated image size breakpoints (px) */\nexport const IMAGE_SIZES = [384, 768, 1536] as const\n\n/**\n * Returns the optimal image URL for a given display width.\n *\n * Picks the smallest pre-generated size whose width >= displayWidth × dpr.\n * Falls back to the original URL when no matching size exists.\n *\n * @param image - Payload image document\n * @param displayWidth - CSS pixel width the image will be displayed at\n * @param dpr - Device pixel ratio (default: 1)\n * @returns URL string, or empty string if no URL is available\n */\nexport function getImageUrl(\n  image: ImageData,\n  displayWidth: number,\n  dpr: number = 1,\n): string {\n  const target = displayWidth * dpr\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      if (size >= target) {\n        const entry = sizes[String(size)]\n        if (entry?.url) return entry.url\n      }\n    }\n  }\n\n  return image.url ?? ''\n}\n\n/**\n * Generates an HTML `srcset` attribute string from pre-generated sizes.\n *\n * Includes all available sizes plus the original image.\n * Example output: `\"url-384 384w, url-768 768w, url-1536 1536w, url-original 2000w\"`\n *\n * @param image - Payload image document\n * @returns srcset string, or empty string if no URLs are available\n */\nexport function getImageSrcSet(image: ImageData): string {\n  const parts: string[] = []\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      const entry = sizes[String(size)]\n      if (entry?.url && entry.width) {\n        parts.push(`${entry.url} ${entry.width}w`)\n      }\n    }\n  }\n\n  if (image.url && image.width) {\n    parts.push(`${image.url} ${image.width}w`)\n  }\n\n  return parts.join(', ')\n}\n\n/**\n * Returns the LQIP (Low Quality Image Placeholder) data URL for an image.\n *\n * @param image - Payload image document\n * @returns LQIP data URL string, or undefined if not available\n */\nexport function getImageLqip(image: ImageData): string | undefined {\n  return image.lqip ?? undefined\n}\n\n/**\n * Returns the extracted color palette for an image.\n *\n * @param image - Payload image document\n * @returns ImagePalette object, or undefined if not available\n */\nexport function getImagePalette(image: ImageData): ImagePalette | undefined {\n  return image.palette ?? undefined\n}\n\n/** Options for `getImagePlaceholderStyle` */\nexport interface ImagePlaceholderOptions {\n  /** Placeholder strategy (default: 'blur') */\n  type?: 'blur' | 'color' | 'none'\n  /** Which palette color to use for 'color' strategy (default: 'muted') */\n  paletteColor?: keyof ImagePalette\n}\n\n/**\n * Returns inline CSS styles for an image placeholder.\n *\n * - `blur`: uses LQIP as background, falls back to palette color, then empty\n * - `color`: uses palette color as background, falls back to empty\n * - `none`: always returns empty\n *\n * @param image - Payload image document\n * @param options - Placeholder options\n * @returns CSS style object compatible with React CSSProperties\n */\nexport function getImagePlaceholderStyle(\n  image: ImageData,\n  options?: ImagePlaceholderOptions,\n): Record<string, string> {\n  const type = options?.type ?? 'blur'\n  const paletteColor = options?.paletteColor ?? 'muted'\n\n  if (type === 'none') return {}\n\n  const color = image.palette?.[paletteColor]\n\n  if (type === 'blur') {\n    const lqip = image.lqip\n    if (lqip) {\n      return {\n        backgroundImage: `url(${lqip})`,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }\n    }\n    // Cascade: fall back to color\n    if (color) {\n      return { backgroundColor: color }\n    }\n    return {}\n  }\n\n  // type === 'color'\n  if (color) {\n    return { backgroundColor: color }\n  }\n  return {}\n}\n"],"mappings":"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","names":["React"]}
+{"version":3,"sources":["../../src/ui/Image/index.tsx","../../src/utils/image.ts"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport type { CSSProperties } from 'react'\nimport type { ImageData } from '../../utils/image'\nimport { getImageSrcSet, getImagePlaceholderStyle } from '../../utils/image'\n\nexport interface ImageProps {\n  /** Payload image document */\n  image: ImageData\n  /** Display width in CSS pixels (for selecting optimal srcset size) */\n  width?: number\n  /** Device pixel ratio (default: 1) */\n  dpr?: number\n  /** Placeholder strategy (default: 'blur'; defaults to 'none' when imageRendering is 'pixelated' or 'crisp-edges') */\n  placeholder?: 'blur' | 'color' | 'none'\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: CSSProperties\n  /** Inner `<img>` className */\n  imgClassName?: string\n  /** Inner `<img>` style */\n  imgStyle?: CSSProperties\n  /** HTML sizes attribute */\n  sizes?: string\n  /** Loading strategy (default: 'lazy'; automatically 'eager' when priority is true) */\n  loading?: 'lazy' | 'eager'\n  /** Callback when image finishes loading */\n  onLoad?: () => void\n  /** Object-fit for the image (default: 'cover') */\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\n  /** When true, loads eagerly with high fetch priority (for LCP images) */\n  priority?: boolean\n  /** When true, fills parent container (width/height: 100%, no aspect ratio) */\n  fill?: boolean\n  /** CSS image-rendering mode (e.g. 'pixelated' for pixel art) */\n  imageRendering?: 'auto' | 'pixelated' | 'crisp-edges'\n}\n\n/**\n * Image component with blur-up / color placeholder support.\n *\n * Uses LQIP (Low Quality Image Placeholder) for a smooth blur-up effect,\n * falling back to palette color or no placeholder.\n */\nexport function Image({\n  image,\n  width,\n  dpr = 1,\n  placeholder: placeholderProp,\n  className,\n  style,\n  imgClassName,\n  imgStyle,\n  sizes,\n  loading: loadingProp,\n  onLoad,\n  objectFit = 'cover',\n  priority = false,\n  fill = false,\n  imageRendering,\n}: ImageProps) {\n  const [loaded, setLoaded] = useState(false)\n  const firedRef = useRef(false)\n\n  // Resolve defaults based on other props\n  const isPixelRendering =\n    imageRendering === 'pixelated' || imageRendering === 'crisp-edges'\n  const placeholder = placeholderProp ?? (isPixelRendering ? 'none' : 'blur')\n  const loading = priority ? 'eager' : (loadingProp ?? 'lazy')\n\n  const aspectRatio =\n    !fill && image.width && image.height\n      ? `${image.width} / ${image.height}`\n      : undefined\n\n  const srcSet = getImageSrcSet(image)\n  const src = image.url ?? undefined\n\n  // Placeholder: LQIP overlay or color overlay (mutually exclusive)\n  const hasLqip = placeholder === 'blur' && !!image.lqip\n  const placeholderStyle = getImagePlaceholderStyle(image, {\n    type: placeholder,\n  })\n  const placeholderColor =\n    !hasLqip && 'backgroundColor' in placeholderStyle\n      ? placeholderStyle.backgroundColor\n      : undefined\n\n  const fireLoad = useCallback(() => {\n    if (firedRef.current) return\n    firedRef.current = true\n    setLoaded(true)\n    onLoad?.()\n  }, [onLoad])\n\n  // Callback ref: detect SSR-cached images that are already loaded\n  const imgRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      if (node && node.complete && node.naturalWidth > 0) {\n        fireLoad()\n      }\n    },\n    [fireLoad],\n  )\n\n  // Container styles\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    overflow: 'hidden',\n    ...(fill ? { width: '100%', height: '100%' } : {}),\n    ...(aspectRatio ? { aspectRatio } : {}),\n    ...style,\n  }\n\n  // Shared overlay styles (LQIP and color)\n  const overlayBase: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    opacity: loaded ? 0 : 1,\n    transition: 'opacity 0.3s ease',\n    pointerEvents: 'none',\n  }\n\n  // Main image styles\n  const mainImgStyle: CSSProperties = {\n    display: 'block',\n    width: '100%',\n    height: '100%',\n    objectFit,\n    ...(imageRendering ? { imageRendering } : {}),\n    opacity: loaded ? 1 : 0,\n    transition: 'opacity 0.3s ease',\n    ...imgStyle,\n  }\n\n  return (\n    <div className={className} style={containerStyle}>\n      {hasLqip && (\n        <img\n          aria-hidden\n          alt=\"\"\n          src={image.lqip!}\n          style={{\n            ...overlayBase,\n            display: 'block',\n            objectFit,\n            filter: 'blur(20px)',\n            transform: 'scale(1.1)',\n          }}\n        />\n      )}\n      {placeholderColor && (\n        <div\n          aria-hidden\n          style={{\n            ...overlayBase,\n            backgroundColor: placeholderColor,\n          }}\n        />\n      )}\n      <img\n        ref={imgRef}\n        alt={image.alt ?? ''}\n        src={src}\n        srcSet={srcSet || undefined}\n        sizes={sizes}\n        width={width ? width * dpr : undefined}\n        loading={loading}\n        decoding=\"async\"\n        fetchPriority={priority ? 'high' : undefined}\n        onLoad={fireLoad}\n        className={imgClassName}\n        style={mainImgStyle}\n      />\n    </div>\n  )\n}\n","/** Palette colors extracted from an image */\nexport interface ImagePalette {\n  vibrant?: string | null\n  muted?: string | null\n  darkVibrant?: string | null\n  darkMuted?: string | null\n  lightVibrant?: string | null\n  lightMuted?: string | null\n}\n\n/** Common image data shape from Payload CMS upload collections */\nexport interface ImageData {\n  url?: string | null\n  width?: number | null\n  height?: number | null\n  alt?: string | null\n  lqip?: string | null\n  palette?: ImagePalette | null\n  sizes?: Record<\n    string,\n    | {\n        url?: string | null\n        width?: number | null\n        height?: number | null\n      }\n    | undefined\n  >\n}\n\n/** Pre-generated image size breakpoints (px) */\nexport const IMAGE_SIZES = [384, 768, 1536] as const\n\n/**\n * Returns the optimal image URL for a given display width.\n *\n * Picks the smallest pre-generated size whose width >= displayWidth × dpr.\n * Falls back to the original URL when no matching size exists.\n *\n * @param image - Payload image document\n * @param displayWidth - CSS pixel width the image will be displayed at\n * @param dpr - Device pixel ratio (default: 1)\n * @returns URL string, or empty string if no URL is available\n */\nexport function getImageUrl(\n  image: ImageData,\n  displayWidth: number,\n  dpr: number = 1,\n): string {\n  const target = displayWidth * dpr\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      if (size >= target) {\n        const entry = sizes[String(size)]\n        if (entry?.url) return entry.url\n      }\n    }\n  }\n\n  return image.url ?? ''\n}\n\n/**\n * Generates an HTML `srcset` attribute string from pre-generated sizes.\n *\n * Includes all available sizes plus the original image.\n * Example output: `\"url-384 384w, url-768 768w, url-1536 1536w, url-original 2000w\"`\n *\n * @param image - Payload image document\n * @returns srcset string, or empty string if no URLs are available\n */\nexport function getImageSrcSet(image: ImageData): string {\n  const parts: string[] = []\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      const entry = sizes[String(size)]\n      if (entry?.url && entry.width) {\n        parts.push(`${entry.url} ${entry.width}w`)\n      }\n    }\n  }\n\n  if (image.url && image.width) {\n    parts.push(`${image.url} ${image.width}w`)\n  }\n\n  return parts.join(', ')\n}\n\n/**\n * Returns the LQIP (Low Quality Image Placeholder) data URL for an image.\n *\n * @param image - Payload image document\n * @returns LQIP data URL string, or undefined if not available\n */\nexport function getImageLqip(image: ImageData): string | undefined {\n  return image.lqip ?? undefined\n}\n\n/**\n * Returns the extracted color palette for an image.\n *\n * @param image - Payload image document\n * @returns ImagePalette object, or undefined if not available\n */\nexport function getImagePalette(image: ImageData): ImagePalette | undefined {\n  return image.palette ?? undefined\n}\n\n/** Options for `getImagePlaceholderStyle` */\nexport interface ImagePlaceholderOptions {\n  /** Placeholder strategy (default: 'blur') */\n  type?: 'blur' | 'color' | 'none'\n  /** Which palette color to use for 'color' strategy (default: 'muted') */\n  paletteColor?: keyof ImagePalette\n}\n\n/**\n * Returns inline CSS styles for an image placeholder.\n *\n * - `blur`: uses LQIP as background, falls back to palette color, then empty\n * - `color`: uses palette color as background, falls back to empty\n * - `none`: always returns empty\n *\n * @param image - Payload image document\n * @param options - Placeholder options\n * @returns CSS style object compatible with React CSSProperties\n */\nexport function getImagePlaceholderStyle(\n  image: ImageData,\n  options?: ImagePlaceholderOptions,\n): Record<string, string> {\n  const type = options?.type ?? 'blur'\n  const paletteColor = options?.paletteColor ?? 'muted'\n\n  if (type === 'none') return {}\n\n  const color = image.palette?.[paletteColor]\n\n  if (type === 'blur') {\n    const lqip = image.lqip\n    if (lqip) {\n      return {\n        backgroundImage: `url(${lqip})`,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }\n    }\n    // Cascade: fall back to color\n    if (color) {\n      return { backgroundColor: color }\n    }\n    return {}\n  }\n\n  // type === 'color'\n  if (color) {\n    return { backgroundColor: color }\n  }\n  return {}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAqD;;;AC4B9C,IAAM,cAAc,CAAC,KAAK,KAAK,IAAI;AA0CnC,SAAS,eAAe,OAA0B;AACvD,QAAM,QAAkB,CAAC;AACzB,QAAM,QAAQ,MAAM;AAEpB,MAAI,OAAO;AACT,eAAW,QAAQ,aAAa;AAC9B,YAAM,QAAQ,MAAM,OAAO,IAAI,CAAC;AAChC,UAAI,OAAO,OAAO,MAAM,OAAO;AAC7B,cAAM,KAAK,GAAG,MAAM,GAAG,IAAI,MAAM,KAAK,GAAG;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AAEA,MAAI,MAAM,OAAO,MAAM,OAAO;AAC5B,UAAM,KAAK,GAAG,MAAM,GAAG,IAAI,MAAM,KAAK,GAAG;AAAA,EAC3C;AAEA,SAAO,MAAM,KAAK,IAAI;AACxB;AAyCO,SAAS,yBACd,OACA,SACwB;AACxB,QAAM,OAAO,SAAS,QAAQ;AAC9B,QAAM,eAAe,SAAS,gBAAgB;AAE9C,MAAI,SAAS,OAAQ,QAAO,CAAC;AAE7B,QAAM,QAAQ,MAAM,UAAU,YAAY;AAE1C,MAAI,SAAS,QAAQ;AACnB,UAAM,OAAO,MAAM;AACnB,QAAI,MAAM;AACR,aAAO;AAAA,QACL,iBAAiB,OAAO,IAAI;AAAA,QAC5B,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,IACF;AAEA,QAAI,OAAO;AACT,aAAO,EAAE,iBAAiB,MAAM;AAAA,IAClC;AACA,WAAO,CAAC;AAAA,EACV;AAGA,MAAI,OAAO;AACT,WAAO,EAAE,iBAAiB,MAAM;AAAA,EAClC;AACA,SAAO,CAAC;AACV;;;ADrHO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AACF,GAAe;AACb,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,eAAW,qBAAO,KAAK;AAG7B,QAAM,mBACJ,mBAAmB,eAAe,mBAAmB;AACvD,QAAM,cAAc,oBAAoB,mBAAmB,SAAS;AACpE,QAAM,UAAU,WAAW,UAAW,eAAe;AAErD,QAAM,cACJ,CAAC,QAAQ,MAAM,SAAS,MAAM,SAC1B,GAAG,MAAM,KAAK,MAAM,MAAM,MAAM,KAChC;AAEN,QAAM,SAAS,eAAe,KAAK;AACnC,QAAM,MAAM,MAAM,OAAO;AAGzB,QAAM,UAAU,gBAAgB,UAAU,CAAC,CAAC,MAAM;AAClD,QAAM,mBAAmB,yBAAyB,OAAO;AAAA,IACvD,MAAM;AAAA,EACR,CAAC;AACD,QAAM,mBACJ,CAAC,WAAW,qBAAqB,mBAC7B,iBAAiB,kBACjB;AAEN,QAAM,eAAW,0BAAY,MAAM;AACjC,QAAI,SAAS,QAAS;AACtB,aAAS,UAAU;AACnB,cAAU,IAAI;AACd,aAAS;AAAA,EACX,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,aAAS;AAAA,IACb,CAAC,SAAkC;AACjC,UAAI,QAAQ,KAAK,YAAY,KAAK,eAAe,GAAG;AAClD,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAGA,QAAM,iBAAgC;AAAA,IACpC,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAI,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO,IAAI,CAAC;AAAA,IAChD,GAAI,cAAc,EAAE,YAAY,IAAI,CAAC;AAAA,IACrC,GAAG;AAAA,EACL;AAGA,QAAM,cAA6B;AAAA,IACjC,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,SAAS,IAAI;AAAA,IACtB,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AAGA,QAAM,eAA8B;AAAA,IAClC,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,GAAI,iBAAiB,EAAE,eAAe,IAAI,CAAC;AAAA,IAC3C,SAAS,SAAS,IAAI;AAAA,IACtB,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAsB,OAAO,kBAC/B,WACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,KAAI;AAAA,MACJ,KAAK,MAAM;AAAA,MACX,OAAO;AAAA,QACL,GAAG;AAAA,QACH,SAAS;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR,WAAW;AAAA,MACb;AAAA;AAAA,EACF,GAED,oBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO;AAAA,QACL,GAAG;AAAA,QACH,iBAAiB;AAAA,MACnB;AAAA;AAAA,EACF,GAEF,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK,MAAM,OAAO;AAAA,MAClB;AAAA,MACA,QAAQ,UAAU;AAAA,MAClB;AAAA,MACA,OAAO,QAAQ,QAAQ,MAAM;AAAA,MAC7B;AAAA,MACA,UAAS;AAAA,MACT,eAAe,WAAW,SAAS;AAAA,MACnC,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA;AAAA,EACT,CACF;AAEJ;","names":["React"]}

package/dist/ui/image.js

@@ -1,23 +1,4 @@
 "use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/ui/Image/index.tsx
 import React, { useCallback, useRef, useState } from "react";
@@ -30,7 +11,7 @@ function getImageSrcSet(image) {
   if (sizes) {
     for (const size of IMAGE_SIZES) {
       const entry = sizes[String(size)];
-      if ((entry == null ? void 0 : entry.url) && entry.width) {
+      if (entry?.url && entry.width) {
         parts.push(`${entry.url} ${entry.width}w`);
       }
     }
@@ -41,11 +22,10 @@ function getImageSrcSet(image) {
   return parts.join(", ");
 }
 function getImagePlaceholderStyle(image, options) {
-  var _a, _b, _c;
-  const type = (_a = options == null ? void 0 : options.type) != null ? _a : "blur";
-  const paletteColor = (_b = options == null ? void 0 : options.paletteColor) != null ? _b : "muted";
+  const type = options?.type ?? "blur";
+  const paletteColor = options?.paletteColor ?? "muted";
   if (type === "none") return {};
-  const color = (_c = image.palette) == null ? void 0 : _c[paletteColor];
+  const color = image.palette?.[paletteColor];
   if (type === "blur") {
     const lqip = image.lqip;
     if (lqip) {
@@ -84,15 +64,14 @@ function Image({
   fill = false,
   imageRendering
 }) {
-  var _a, _b;
   const [loaded, setLoaded] = useState(false);
   const firedRef = useRef(false);
   const isPixelRendering = imageRendering === "pixelated" || imageRendering === "crisp-edges";
-  const placeholder = placeholderProp != null ? placeholderProp : isPixelRendering ? "none" : "blur";
-  const loading = priority ? "eager" : loadingProp != null ? loadingProp : "lazy";
+  const placeholder = placeholderProp ?? (isPixelRendering ? "none" : "blur");
+  const loading = priority ? "eager" : loadingProp ?? "lazy";
   const aspectRatio = !fill && image.width && image.height ? `${image.width} / ${image.height}` : void 0;
   const srcSet = getImageSrcSet(image);
-  const src = (_a = image.url) != null ? _a : void 0;
+  const src = image.url ?? void 0;
   const hasLqip = placeholder === "blur" && !!image.lqip;
   const placeholderStyle = getImagePlaceholderStyle(image, {
     type: placeholder
@@ -102,7 +81,7 @@ function Image({
     if (firedRef.current) return;
     firedRef.current = true;
     setLoaded(true);
-    onLoad == null ? void 0 : onLoad();
+    onLoad?.();
   }, [onLoad]);
   const imgRef = useCallback(
     (node) => {
@@ -112,10 +91,13 @@ function Image({
     },
     [fireLoad]
   );
-  const containerStyle = __spreadValues(__spreadValues(__spreadValues({
+  const containerStyle = {
     position: "relative",
-    overflow: "hidden"
-  }, fill ? { width: "100%", height: "100%" } : {}), aspectRatio ? { aspectRatio } : {}), style);
+    overflow: "hidden",
+    ...fill ? { width: "100%", height: "100%" } : {},
+    ...aspectRatio ? { aspectRatio } : {},
+    ...style
+  };
   const overlayBase = {
     position: "absolute",
     top: 0,
@@ -126,41 +108,44 @@ function Image({
     transition: "opacity 0.3s ease",
     pointerEvents: "none"
   };
-  const mainImgStyle = __spreadValues(__spreadProps(__spreadValues({
+  const mainImgStyle = {
     display: "block",
     width: "100%",
     height: "100%",
-    objectFit
-  }, imageRendering ? { imageRendering } : {}), {
+    objectFit,
+    ...imageRendering ? { imageRendering } : {},
     opacity: loaded ? 1 : 0,
-    transition: "opacity 0.3s ease"
-  }), imgStyle);
+    transition: "opacity 0.3s ease",
+    ...imgStyle
+  };
   return /* @__PURE__ */ React.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ React.createElement(
     "img",
     {
       "aria-hidden": true,
       alt: "",
       src: image.lqip,
-      style: __spreadProps(__spreadValues({}, overlayBase), {
+      style: {
+        ...overlayBase,
         display: "block",
         objectFit,
         filter: "blur(20px)",
         transform: "scale(1.1)"
-      })
+      }
     }
   ), placeholderColor && /* @__PURE__ */ React.createElement(
     "div",
     {
       "aria-hidden": true,
-      style: __spreadProps(__spreadValues({}, overlayBase), {
+      style: {
+        ...overlayBase,
         backgroundColor: placeholderColor
-      })
+      }
     }
   ), /* @__PURE__ */ React.createElement(
     "img",
     {
       ref: imgRef,
-      alt: (_b = image.alt) != null ? _b : "",
+      alt: image.alt ?? "",
       src,
       srcSet: srcSet || void 0,
       sizes,

package/dist/ui/image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/Image/index.tsx","../../src/utils/image.ts"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport type { CSSProperties } from 'react'\nimport type { ImageData } from '../../utils/image'\nimport { getImageSrcSet, getImagePlaceholderStyle } from '../../utils/image'\n\nexport interface ImageProps {\n  /** Payload image document */\n  image: ImageData\n  /** Display width in CSS pixels (for selecting optimal srcset size) */\n  width?: number\n  /** Device pixel ratio (default: 1) */\n  dpr?: number\n  /** Placeholder strategy (default: 'blur'; defaults to 'none' when imageRendering is 'pixelated' or 'crisp-edges') */\n  placeholder?: 'blur' | 'color' | 'none'\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: CSSProperties\n  /** Inner `<img>` className */\n  imgClassName?: string\n  /** Inner `<img>` style */\n  imgStyle?: CSSProperties\n  /** HTML sizes attribute */\n  sizes?: string\n  /** Loading strategy (default: 'lazy'; automatically 'eager' when priority is true) */\n  loading?: 'lazy' | 'eager'\n  /** Callback when image finishes loading */\n  onLoad?: () => void\n  /** Object-fit for the image (default: 'cover') */\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\n  /** When true, loads eagerly with high fetch priority (for LCP images) */\n  priority?: boolean\n  /** When true, fills parent container (width/height: 100%, no aspect ratio) */\n  fill?: boolean\n  /** CSS image-rendering mode (e.g. 'pixelated' for pixel art) */\n  imageRendering?: 'auto' | 'pixelated' | 'crisp-edges'\n}\n\n/**\n * Image component with blur-up / color placeholder support.\n *\n * Uses LQIP (Low Quality Image Placeholder) for a smooth blur-up effect,\n * falling back to palette color or no placeholder.\n */\nexport function Image({\n  image,\n  width,\n  dpr = 1,\n  placeholder: placeholderProp,\n  className,\n  style,\n  imgClassName,\n  imgStyle,\n  sizes,\n  loading: loadingProp,\n  onLoad,\n  objectFit = 'cover',\n  priority = false,\n  fill = false,\n  imageRendering,\n}: ImageProps) {\n  const [loaded, setLoaded] = useState(false)\n  const firedRef = useRef(false)\n\n  // Resolve defaults based on other props\n  const isPixelRendering =\n    imageRendering === 'pixelated' || imageRendering === 'crisp-edges'\n  const placeholder = placeholderProp ?? (isPixelRendering ? 'none' : 'blur')\n  const loading = priority ? 'eager' : (loadingProp ?? 'lazy')\n\n  const aspectRatio =\n    !fill && image.width && image.height\n      ? `${image.width} / ${image.height}`\n      : undefined\n\n  const srcSet = getImageSrcSet(image)\n  const src = image.url ?? undefined\n\n  // Placeholder: LQIP overlay or color overlay (mutually exclusive)\n  const hasLqip = placeholder === 'blur' && !!image.lqip\n  const placeholderStyle = getImagePlaceholderStyle(image, {\n    type: placeholder,\n  })\n  const placeholderColor =\n    !hasLqip && 'backgroundColor' in placeholderStyle\n      ? placeholderStyle.backgroundColor\n      : undefined\n\n  const fireLoad = useCallback(() => {\n    if (firedRef.current) return\n    firedRef.current = true\n    setLoaded(true)\n    onLoad?.()\n  }, [onLoad])\n\n  // Callback ref: detect SSR-cached images that are already loaded\n  const imgRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      if (node && node.complete && node.naturalWidth > 0) {\n        fireLoad()\n      }\n    },\n    [fireLoad],\n  )\n\n  // Container styles\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    overflow: 'hidden',\n    ...(fill ? { width: '100%', height: '100%' } : {}),\n    ...(aspectRatio ? { aspectRatio } : {}),\n    ...style,\n  }\n\n  // Shared overlay styles (LQIP and color)\n  const overlayBase: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    opacity: loaded ? 0 : 1,\n    transition: 'opacity 0.3s ease',\n    pointerEvents: 'none',\n  }\n\n  // Main image styles\n  const mainImgStyle: CSSProperties = {\n    display: 'block',\n    width: '100%',\n    height: '100%',\n    objectFit,\n    ...(imageRendering ? { imageRendering } : {}),\n    opacity: loaded ? 1 : 0,\n    transition: 'opacity 0.3s ease',\n    ...imgStyle,\n  }\n\n  return (\n    <div className={className} style={containerStyle}>\n      {hasLqip && (\n        <img\n          aria-hidden\n          alt=\"\"\n          src={image.lqip!}\n          style={{\n            ...overlayBase,\n            display: 'block',\n            objectFit,\n            filter: 'blur(20px)',\n            transform: 'scale(1.1)',\n          }}\n        />\n      )}\n      {placeholderColor && (\n        <div\n          aria-hidden\n          style={{\n            ...overlayBase,\n            backgroundColor: placeholderColor,\n          }}\n        />\n      )}\n      <img\n        ref={imgRef}\n        alt={image.alt ?? ''}\n        src={src}\n        srcSet={srcSet || undefined}\n        sizes={sizes}\n        width={width ? width * dpr : undefined}\n        loading={loading}\n        decoding=\"async\"\n        fetchPriority={priority ? 'high' : undefined}\n        onLoad={fireLoad}\n        className={imgClassName}\n        style={mainImgStyle}\n      />\n    </div>\n  )\n}\n","/** Palette colors extracted from an image */\nexport interface ImagePalette {\n  vibrant?: string | null\n  muted?: string | null\n  darkVibrant?: string | null\n  darkMuted?: string | null\n  lightVibrant?: string | null\n  lightMuted?: string | null\n}\n\n/** Common image data shape from Payload CMS upload collections */\nexport interface ImageData {\n  url?: string | null\n  width?: number | null\n  height?: number | null\n  alt?: string | null\n  lqip?: string | null\n  palette?: ImagePalette | null\n  sizes?: Record<\n    string,\n    | {\n        url?: string | null\n        width?: number | null\n        height?: number | null\n      }\n    | undefined\n  >\n}\n\n/** Pre-generated image size breakpoints (px) */\nexport const IMAGE_SIZES = [384, 768, 1536] as const\n\n/**\n * Returns the optimal image URL for a given display width.\n *\n * Picks the smallest pre-generated size whose width >= displayWidth × dpr.\n * Falls back to the original URL when no matching size exists.\n *\n * @param image - Payload image document\n * @param displayWidth - CSS pixel width the image will be displayed at\n * @param dpr - Device pixel ratio (default: 1)\n * @returns URL string, or empty string if no URL is available\n */\nexport function getImageUrl(\n  image: ImageData,\n  displayWidth: number,\n  dpr: number = 1,\n): string {\n  const target = displayWidth * dpr\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      if (size >= target) {\n        const entry = sizes[String(size)]\n        if (entry?.url) return entry.url\n      }\n    }\n  }\n\n  return image.url ?? ''\n}\n\n/**\n * Generates an HTML `srcset` attribute string from pre-generated sizes.\n *\n * Includes all available sizes plus the original image.\n * Example output: `\"url-384 384w, url-768 768w, url-1536 1536w, url-original 2000w\"`\n *\n * @param image - Payload image document\n * @returns srcset string, or empty string if no URLs are available\n */\nexport function getImageSrcSet(image: ImageData): string {\n  const parts: string[] = []\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      const entry = sizes[String(size)]\n      if (entry?.url && entry.width) {\n        parts.push(`${entry.url} ${entry.width}w`)\n      }\n    }\n  }\n\n  if (image.url && image.width) {\n    parts.push(`${image.url} ${image.width}w`)\n  }\n\n  return parts.join(', ')\n}\n\n/**\n * Returns the LQIP (Low Quality Image Placeholder) data URL for an image.\n *\n * @param image - Payload image document\n * @returns LQIP data URL string, or undefined if not available\n */\nexport function getImageLqip(image: ImageData): string | undefined {\n  return image.lqip ?? undefined\n}\n\n/**\n * Returns the extracted color palette for an image.\n *\n * @param image - Payload image document\n * @returns ImagePalette object, or undefined if not available\n */\nexport function getImagePalette(image: ImageData): ImagePalette | undefined {\n  return image.palette ?? undefined\n}\n\n/** Options for `getImagePlaceholderStyle` */\nexport interface ImagePlaceholderOptions {\n  /** Placeholder strategy (default: 'blur') */\n  type?: 'blur' | 'color' | 'none'\n  /** Which palette color to use for 'color' strategy (default: 'muted') */\n  paletteColor?: keyof ImagePalette\n}\n\n/**\n * Returns inline CSS styles for an image placeholder.\n *\n * - `blur`: uses LQIP as background, falls back to palette color, then empty\n * - `color`: uses palette color as background, falls back to empty\n * - `none`: always returns empty\n *\n * @param image - Payload image document\n * @param options - Placeholder options\n * @returns CSS style object compatible with React CSSProperties\n */\nexport function getImagePlaceholderStyle(\n  image: ImageData,\n  options?: ImagePlaceholderOptions,\n): Record<string, string> {\n  const type = options?.type ?? 'blur'\n  const paletteColor = options?.paletteColor ?? 'muted'\n\n  if (type === 'none') return {}\n\n  const color = image.palette?.[paletteColor]\n\n  if (type === 'blur') {\n    const lqip = image.lqip\n    if (lqip) {\n      return {\n        backgroundImage: `url(${lqip})`,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }\n    }\n    // Cascade: fall back to color\n    if (color) {\n      return { backgroundColor: color }\n    }\n    return {}\n  }\n\n  // type === 'color'\n  if (color) {\n    return { backgroundColor: color }\n  }\n  return {}\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/ui/Image/index.tsx","../../src/utils/image.ts"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, useState } from 'react'\nimport type { CSSProperties } from 'react'\nimport type { ImageData } from '../../utils/image'\nimport { getImageSrcSet, getImagePlaceholderStyle } from '../../utils/image'\n\nexport interface ImageProps {\n  /** Payload image document */\n  image: ImageData\n  /** Display width in CSS pixels (for selecting optimal srcset size) */\n  width?: number\n  /** Device pixel ratio (default: 1) */\n  dpr?: number\n  /** Placeholder strategy (default: 'blur'; defaults to 'none' when imageRendering is 'pixelated' or 'crisp-edges') */\n  placeholder?: 'blur' | 'color' | 'none'\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: CSSProperties\n  /** Inner `<img>` className */\n  imgClassName?: string\n  /** Inner `<img>` style */\n  imgStyle?: CSSProperties\n  /** HTML sizes attribute */\n  sizes?: string\n  /** Loading strategy (default: 'lazy'; automatically 'eager' when priority is true) */\n  loading?: 'lazy' | 'eager'\n  /** Callback when image finishes loading */\n  onLoad?: () => void\n  /** Object-fit for the image (default: 'cover') */\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\n  /** When true, loads eagerly with high fetch priority (for LCP images) */\n  priority?: boolean\n  /** When true, fills parent container (width/height: 100%, no aspect ratio) */\n  fill?: boolean\n  /** CSS image-rendering mode (e.g. 'pixelated' for pixel art) */\n  imageRendering?: 'auto' | 'pixelated' | 'crisp-edges'\n}\n\n/**\n * Image component with blur-up / color placeholder support.\n *\n * Uses LQIP (Low Quality Image Placeholder) for a smooth blur-up effect,\n * falling back to palette color or no placeholder.\n */\nexport function Image({\n  image,\n  width,\n  dpr = 1,\n  placeholder: placeholderProp,\n  className,\n  style,\n  imgClassName,\n  imgStyle,\n  sizes,\n  loading: loadingProp,\n  onLoad,\n  objectFit = 'cover',\n  priority = false,\n  fill = false,\n  imageRendering,\n}: ImageProps) {\n  const [loaded, setLoaded] = useState(false)\n  const firedRef = useRef(false)\n\n  // Resolve defaults based on other props\n  const isPixelRendering =\n    imageRendering === 'pixelated' || imageRendering === 'crisp-edges'\n  const placeholder = placeholderProp ?? (isPixelRendering ? 'none' : 'blur')\n  const loading = priority ? 'eager' : (loadingProp ?? 'lazy')\n\n  const aspectRatio =\n    !fill && image.width && image.height\n      ? `${image.width} / ${image.height}`\n      : undefined\n\n  const srcSet = getImageSrcSet(image)\n  const src = image.url ?? undefined\n\n  // Placeholder: LQIP overlay or color overlay (mutually exclusive)\n  const hasLqip = placeholder === 'blur' && !!image.lqip\n  const placeholderStyle = getImagePlaceholderStyle(image, {\n    type: placeholder,\n  })\n  const placeholderColor =\n    !hasLqip && 'backgroundColor' in placeholderStyle\n      ? placeholderStyle.backgroundColor\n      : undefined\n\n  const fireLoad = useCallback(() => {\n    if (firedRef.current) return\n    firedRef.current = true\n    setLoaded(true)\n    onLoad?.()\n  }, [onLoad])\n\n  // Callback ref: detect SSR-cached images that are already loaded\n  const imgRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      if (node && node.complete && node.naturalWidth > 0) {\n        fireLoad()\n      }\n    },\n    [fireLoad],\n  )\n\n  // Container styles\n  const containerStyle: CSSProperties = {\n    position: 'relative',\n    overflow: 'hidden',\n    ...(fill ? { width: '100%', height: '100%' } : {}),\n    ...(aspectRatio ? { aspectRatio } : {}),\n    ...style,\n  }\n\n  // Shared overlay styles (LQIP and color)\n  const overlayBase: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    opacity: loaded ? 0 : 1,\n    transition: 'opacity 0.3s ease',\n    pointerEvents: 'none',\n  }\n\n  // Main image styles\n  const mainImgStyle: CSSProperties = {\n    display: 'block',\n    width: '100%',\n    height: '100%',\n    objectFit,\n    ...(imageRendering ? { imageRendering } : {}),\n    opacity: loaded ? 1 : 0,\n    transition: 'opacity 0.3s ease',\n    ...imgStyle,\n  }\n\n  return (\n    <div className={className} style={containerStyle}>\n      {hasLqip && (\n        <img\n          aria-hidden\n          alt=\"\"\n          src={image.lqip!}\n          style={{\n            ...overlayBase,\n            display: 'block',\n            objectFit,\n            filter: 'blur(20px)',\n            transform: 'scale(1.1)',\n          }}\n        />\n      )}\n      {placeholderColor && (\n        <div\n          aria-hidden\n          style={{\n            ...overlayBase,\n            backgroundColor: placeholderColor,\n          }}\n        />\n      )}\n      <img\n        ref={imgRef}\n        alt={image.alt ?? ''}\n        src={src}\n        srcSet={srcSet || undefined}\n        sizes={sizes}\n        width={width ? width * dpr : undefined}\n        loading={loading}\n        decoding=\"async\"\n        fetchPriority={priority ? 'high' : undefined}\n        onLoad={fireLoad}\n        className={imgClassName}\n        style={mainImgStyle}\n      />\n    </div>\n  )\n}\n","/** Palette colors extracted from an image */\nexport interface ImagePalette {\n  vibrant?: string | null\n  muted?: string | null\n  darkVibrant?: string | null\n  darkMuted?: string | null\n  lightVibrant?: string | null\n  lightMuted?: string | null\n}\n\n/** Common image data shape from Payload CMS upload collections */\nexport interface ImageData {\n  url?: string | null\n  width?: number | null\n  height?: number | null\n  alt?: string | null\n  lqip?: string | null\n  palette?: ImagePalette | null\n  sizes?: Record<\n    string,\n    | {\n        url?: string | null\n        width?: number | null\n        height?: number | null\n      }\n    | undefined\n  >\n}\n\n/** Pre-generated image size breakpoints (px) */\nexport const IMAGE_SIZES = [384, 768, 1536] as const\n\n/**\n * Returns the optimal image URL for a given display width.\n *\n * Picks the smallest pre-generated size whose width >= displayWidth × dpr.\n * Falls back to the original URL when no matching size exists.\n *\n * @param image - Payload image document\n * @param displayWidth - CSS pixel width the image will be displayed at\n * @param dpr - Device pixel ratio (default: 1)\n * @returns URL string, or empty string if no URL is available\n */\nexport function getImageUrl(\n  image: ImageData,\n  displayWidth: number,\n  dpr: number = 1,\n): string {\n  const target = displayWidth * dpr\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      if (size >= target) {\n        const entry = sizes[String(size)]\n        if (entry?.url) return entry.url\n      }\n    }\n  }\n\n  return image.url ?? ''\n}\n\n/**\n * Generates an HTML `srcset` attribute string from pre-generated sizes.\n *\n * Includes all available sizes plus the original image.\n * Example output: `\"url-384 384w, url-768 768w, url-1536 1536w, url-original 2000w\"`\n *\n * @param image - Payload image document\n * @returns srcset string, or empty string if no URLs are available\n */\nexport function getImageSrcSet(image: ImageData): string {\n  const parts: string[] = []\n  const sizes = image.sizes\n\n  if (sizes) {\n    for (const size of IMAGE_SIZES) {\n      const entry = sizes[String(size)]\n      if (entry?.url && entry.width) {\n        parts.push(`${entry.url} ${entry.width}w`)\n      }\n    }\n  }\n\n  if (image.url && image.width) {\n    parts.push(`${image.url} ${image.width}w`)\n  }\n\n  return parts.join(', ')\n}\n\n/**\n * Returns the LQIP (Low Quality Image Placeholder) data URL for an image.\n *\n * @param image - Payload image document\n * @returns LQIP data URL string, or undefined if not available\n */\nexport function getImageLqip(image: ImageData): string | undefined {\n  return image.lqip ?? undefined\n}\n\n/**\n * Returns the extracted color palette for an image.\n *\n * @param image - Payload image document\n * @returns ImagePalette object, or undefined if not available\n */\nexport function getImagePalette(image: ImageData): ImagePalette | undefined {\n  return image.palette ?? undefined\n}\n\n/** Options for `getImagePlaceholderStyle` */\nexport interface ImagePlaceholderOptions {\n  /** Placeholder strategy (default: 'blur') */\n  type?: 'blur' | 'color' | 'none'\n  /** Which palette color to use for 'color' strategy (default: 'muted') */\n  paletteColor?: keyof ImagePalette\n}\n\n/**\n * Returns inline CSS styles for an image placeholder.\n *\n * - `blur`: uses LQIP as background, falls back to palette color, then empty\n * - `color`: uses palette color as background, falls back to empty\n * - `none`: always returns empty\n *\n * @param image - Payload image document\n * @param options - Placeholder options\n * @returns CSS style object compatible with React CSSProperties\n */\nexport function getImagePlaceholderStyle(\n  image: ImageData,\n  options?: ImagePlaceholderOptions,\n): Record<string, string> {\n  const type = options?.type ?? 'blur'\n  const paletteColor = options?.paletteColor ?? 'muted'\n\n  if (type === 'none') return {}\n\n  const color = image.palette?.[paletteColor]\n\n  if (type === 'blur') {\n    const lqip = image.lqip\n    if (lqip) {\n      return {\n        backgroundImage: `url(${lqip})`,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }\n    }\n    // Cascade: fall back to color\n    if (color) {\n      return { backgroundColor: color }\n    }\n    return {}\n  }\n\n  // type === 'color'\n  if (color) {\n    return { backgroundColor: color }\n  }\n  return {}\n}\n"],"mappings":"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","names":[]}

package/dist/ui/rich-text.cjs

@@ -2,39 +2,10 @@
 "use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -79,7 +50,7 @@ function createComponentConverters(components, internalDocToHref) {
     const Paragraph = components.Paragraph;
     converters.paragraph = ({ node, nodesToJSX }) => {
       const children = nodesToJSX({ nodes: node.children });
-      return /* @__PURE__ */ import_react.default.createElement(Paragraph, { isEmpty: !(children == null ? void 0 : children.length), node }, (children == null ? void 0 : children.length) ? children : /* @__PURE__ */ import_react.default.createElement("br", null));
+      return /* @__PURE__ */ import_react.default.createElement(Paragraph, { isEmpty: !children?.length, node }, children?.length ? children : /* @__PURE__ */ import_react.default.createElement("br", null));
     };
   }
   if (components.Blockquote) {
@@ -111,11 +82,10 @@ function createComponentConverters(components, internalDocToHref) {
   if (components.Link) {
     const Link = components.Link;
     const resolveHref = (node) => {
-      var _a;
       if (node.fields.linkType === "internal") {
         return internalDocToHref ? internalDocToHref({ linkNode: node }) : "#";
       }
-      return (_a = node.fields.url) != null ? _a : "";
+      return node.fields.url ?? "";
     };
     converters.link = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(
       Link,
@@ -127,19 +97,16 @@ function createComponentConverters(components, internalDocToHref) {
       },
       nodesToJSX({ nodes: node.children })
     );
-    converters.autolink = ({ node, nodesToJSX }) => {
-      var _a;
-      return /* @__PURE__ */ import_react.default.createElement(
-        Link,
-        {
-          href: (_a = node.fields.url) != null ? _a : "",
-          rel: node.fields.newTab ? "noopener noreferrer" : void 0,
-          target: node.fields.newTab ? "_blank" : void 0,
-          node
-        },
-        nodesToJSX({ nodes: node.children })
-      );
-    };
+    converters.autolink = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(
+      Link,
+      {
+        href: node.fields.url ?? "",
+        rel: node.fields.newTab ? "noopener noreferrer" : void 0,
+        target: node.fields.newTab ? "_blank" : void 0,
+        node
+      },
+      nodesToJSX({ nodes: node.children })
+    );
   }
   if (components.HorizontalRule) {
     const HorizontalRule = components.HorizontalRule;
@@ -148,7 +115,6 @@ function createComponentConverters(components, internalDocToHref) {
   if (components.Upload) {
     const Upload = components.Upload;
     converters.upload = ({ node }) => {
-      var _a;
       const uploadNode = node;
       if (typeof uploadNode.value !== "object") return null;
       const doc = uploadNode.value;
@@ -156,7 +122,7 @@ function createComponentConverters(components, internalDocToHref) {
         Upload,
         {
           src: doc.url,
-          alt: ((_a = uploadNode.fields) == null ? void 0 : _a.alt) || (doc == null ? void 0 : doc.alt) || "",
+          alt: uploadNode.fields?.alt || doc?.alt || "",
           width: doc.width,
           height: doc.height,
           mimeType: doc.mimeType,
@@ -191,27 +157,23 @@ function createComponentConverters(components, internalDocToHref) {
   }
   return converters;
 }
-function StyledRichTextContent(_a) {
-  var _b = _a, {
-    components = {},
-    internalDocToHref,
-    blocks,
-    textState
-  } = _b, props = __objRest(_b, [
-    "components",
-    "internalDocToHref",
-    "blocks",
-    "textState"
-  ]);
+function StyledRichTextContent({
+  components = {},
+  internalDocToHref,
+  blocks,
+  textState,
+  ...props
+}) {
   const converters = createComponentConverters(components, internalDocToHref);
   return /* @__PURE__ */ import_react.default.createElement(
     RichTextContent,
-    __spreadProps(__spreadValues({}, props), {
+    {
+      ...props,
       internalDocToHref,
       converters,
       blocks,
       textState
-    })
+    }
   );
 }
 
@@ -221,17 +183,15 @@ function hyphenToCamel(str) {
 }
 function createTextStateConverter(state) {
   const defaultTextConverter = import_react3.TextJSXConverter.text;
-  return (_a) => {
-    var _b = _a, { node } = _b, rest = __objRest(_b, ["node"]);
-    var _a2, _b2;
-    const base = defaultTextConverter(__spreadValues({ node }, rest));
+  return ({ node, ...rest }) => {
+    const base = defaultTextConverter({ node, ...rest });
     const nodeState = node.$;
     if (!nodeState || typeof nodeState !== "object") return base;
     const style = {};
     for (const stateKey in nodeState) {
       const stateValue = nodeState[stateKey];
       if (!stateValue) continue;
-      const css = (_b2 = (_a2 = state[stateKey]) == null ? void 0 : _a2[stateValue]) == null ? void 0 : _b2.css;
+      const css = state[stateKey]?.[stateValue]?.css;
       if (css) {
         for (const prop in css) {
           const val = css[prop];
@@ -252,7 +212,13 @@ function RichTextContent({
   disableDefaultConverters,
   textState
 }) {
-  const baseConverters = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, disableDefaultConverters ? {} : import_react3.defaultJSXConverters), (0, import_react3.LinkJSXConverter)({ internalDocToHref })), textState ? { text: createTextStateConverter(textState) } : {}), converters), blocks ? { blocks } : {});
+  const baseConverters = {
+    ...disableDefaultConverters ? {} : import_react3.defaultJSXConverters,
+    ...(0, import_react3.LinkJSXConverter)({ internalDocToHref }),
+    ...textState ? { text: createTextStateConverter(textState) } : {},
+    ...converters,
+    ...blocks ? { blocks } : {}
+  };
   return /* @__PURE__ */ import_react2.default.createElement(
     import_react3.RichText,
     {

package/dist/ui/rich-text.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/RichText/index.tsx","../../src/ui/RichText/styled.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  SerializedBlockNode,\n  SerializedLinkNode,\n} from '@payloadcms/richtext-lexical'\nimport {\n  SerializedEditorState,\n  SerializedLexicalNode,\n} from '@payloadcms/richtext-lexical/lexical'\nimport {\n  defaultJSXConverters,\n  JSXConverter,\n  JSXConverters,\n  LinkJSXConverter,\n  RichText,\n  TextJSXConverter,\n} from '@payloadcms/richtext-lexical/react'\n\n/**\n * Accepts both Lexical's strict `SerializedEditorState` and Payload's generated\n * richText type (which includes index signatures like `[k: string]: unknown`).\n */\nexport type RichTextData = SerializedEditorState<SerializedLexicalNode> | {\n  root: {\n    type: string\n    children: { type: string; version: number; [k: string]: unknown }[]\n    direction: string | null\n    format: string\n    indent: number\n    version: number\n    [k: string]: unknown\n  }\n  [k: string]: unknown\n}\n\nexport type TextStateConfig = {\n  [stateKey: string]: {\n    [stateValue: string]: {\n      css: Record<string, string>\n      label: string\n    }\n  }\n}\n\nexport interface RichTextContentProps {\n  data: RichTextData\n  className?: string\n  internalDocToHref?: (args: { linkNode: SerializedLinkNode }) => string\n  converters?: Partial<JSXConverters>\n  blocks?: Record<string, JSXConverter<SerializedBlockNode>>\n  disableDefaultConverters?: boolean\n  textState?: TextStateConfig\n}\n\nexport { StyledRichTextContent } from './styled'\nexport type {\n  RichTextComponents,\n  StyledRichTextContentProps,\n  HeadingSlotProps,\n  ParagraphSlotProps,\n  BlockquoteSlotProps,\n  ListSlotProps,\n  ListItemSlotProps,\n  LinkSlotProps,\n  HorizontalRuleSlotProps,\n  UploadSlotProps,\n  TableSlotProps,\n  TableRowSlotProps,\n  TableCellSlotProps,\n} from './styled'\n\nfunction hyphenToCamel(str: string): string {\n  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase())\n}\n\nfunction createTextStateConverter(\n  state: TextStateConfig,\n): JSXConverters['text'] {\n  const defaultTextConverter = TextJSXConverter.text\n  // eslint-disable-next-line react/display-name\n  return ({ node, ...rest }) => {\n    const base = (\n      defaultTextConverter as (...args: unknown[]) => React.ReactNode\n    )({ node, ...rest })\n    const nodeState = (node as Record<string, unknown>).$ as\n      | Record<string, string>\n      | undefined\n    if (!nodeState || typeof nodeState !== 'object') return base\n\n    const style: Record<string, string> = {}\n    for (const stateKey in nodeState) {\n      const stateValue = nodeState[stateKey]\n      if (!stateValue) continue\n      const css = state[stateKey]?.[stateValue]?.css\n      if (css) {\n        for (const prop in css) {\n          const val = css[prop]\n          if (val) style[hyphenToCamel(prop)] = val\n        }\n      }\n    }\n\n    if (Object.keys(style).length === 0) return base\n    return <span style={style}>{base}</span>\n  }\n}\n\nexport function RichTextContent({\n  data,\n  className,\n  internalDocToHref,\n  converters,\n  blocks,\n  disableDefaultConverters,\n  textState,\n}: RichTextContentProps) {\n  const baseConverters: JSXConverters = {\n    ...(disableDefaultConverters ? {} : defaultJSXConverters),\n    ...LinkJSXConverter({ internalDocToHref }),\n    ...(textState ? { text: createTextStateConverter(textState) } : {}),\n    ...converters,\n    ...(blocks ? { blocks } : {}),\n  }\n\n  return (\n    <RichText\n      data={data as SerializedEditorState<SerializedLexicalNode>}\n      className={className}\n      converters={baseConverters}\n    />\n  )\n}\n","'use client'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react'\nimport { SerializedLinkNode } from '@payloadcms/richtext-lexical'\nimport { JSXConverters } from '@payloadcms/richtext-lexical/react'\nimport { RichTextContent, RichTextContentProps } from './index'\n\n// --- Slot prop types (each slot gets structured data + raw node) ---\n\nexport interface HeadingSlotProps {\n  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  children: React.ReactNode\n  node: any\n}\n\nexport interface ParagraphSlotProps {\n  children: React.ReactNode\n  isEmpty: boolean\n  node: any\n}\n\nexport interface BlockquoteSlotProps {\n  children: React.ReactNode\n  node: any\n}\n\nexport interface ListSlotProps {\n  tag: 'ul' | 'ol'\n  listType: string\n  children: React.ReactNode\n  node: any\n}\n\nexport interface ListItemSlotProps {\n  children: React.ReactNode\n  hasSubLists: boolean\n  checked?: boolean\n  value?: number\n  node: any\n}\n\nexport interface LinkSlotProps {\n  href: string\n  target?: string\n  rel?: string\n  children: React.ReactNode\n  node: any\n}\n\nexport interface HorizontalRuleSlotProps {\n  node?: any\n}\n\nexport interface UploadSlotProps {\n  src: string\n  alt: string\n  width?: number\n  height?: number\n  mimeType: string\n  filename: string\n  sizes?: Record<string, any>\n  node: any\n}\n\nexport interface TableSlotProps {\n  children: React.ReactNode\n  node: any\n}\n\nexport interface TableRowSlotProps {\n  children: React.ReactNode\n  node: any\n}\n\nexport interface TableCellSlotProps {\n  tag: 'th' | 'td'\n  children: React.ReactNode\n  colSpan?: number\n  rowSpan?: number\n  backgroundColor?: string\n  node: any\n}\n\n// --- Components map ---\n\nexport interface RichTextComponents {\n  Heading?: React.ComponentType<HeadingSlotProps>\n  Paragraph?: React.ComponentType<ParagraphSlotProps>\n  Blockquote?: React.ComponentType<BlockquoteSlotProps>\n  List?: React.ComponentType<ListSlotProps>\n  ListItem?: React.ComponentType<ListItemSlotProps>\n  Link?: React.ComponentType<LinkSlotProps>\n  HorizontalRule?: React.ComponentType<HorizontalRuleSlotProps>\n  Upload?: React.ComponentType<UploadSlotProps>\n  Table?: React.ComponentType<TableSlotProps>\n  TableRow?: React.ComponentType<TableRowSlotProps>\n  TableCell?: React.ComponentType<TableCellSlotProps>\n}\n\nexport interface StyledRichTextContentProps extends Omit<\n  RichTextContentProps,\n  'converters' | 'disableDefaultConverters'\n> {\n  components?: RichTextComponents\n}\n\nfunction createComponentConverters(\n  components: RichTextComponents,\n  internalDocToHref?: (args: { linkNode: SerializedLinkNode }) => string,\n): Partial<JSXConverters> {\n  const converters: Partial<JSXConverters> = {}\n\n  if (components.Heading) {\n    const Heading = components.Heading\n    converters.heading = ({ node, nodesToJSX }) => (\n      <Heading tag={node.tag} node={node}>\n        {nodesToJSX({ nodes: node.children })}\n      </Heading>\n    )\n  }\n\n  if (components.Paragraph) {\n    const Paragraph = components.Paragraph\n    converters.paragraph = ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: node.children })\n      return (\n        <Paragraph isEmpty={!children?.length} node={node}>\n          {children?.length ? children : <br />}\n        </Paragraph>\n      )\n    }\n  }\n\n  if (components.Blockquote) {\n    const Blockquote = components.Blockquote\n    converters.quote = ({ node, nodesToJSX }) => (\n      <Blockquote node={node}>\n        {nodesToJSX({ nodes: node.children })}\n      </Blockquote>\n    )\n  }\n\n  if (components.List) {\n    const List = components.List\n    converters.list = ({ node, nodesToJSX }) => (\n      <List tag={node.tag} listType={node.listType} node={node}>\n        {nodesToJSX({ nodes: node.children })}\n      </List>\n    )\n  }\n\n  if (components.ListItem) {\n    const ListItem = components.ListItem\n    converters.listitem = ({ node, nodesToJSX }) => {\n      const hasSubLists = node.children.some(\n        (child: { type: string }) => child.type === 'list',\n      )\n      return (\n        <ListItem\n          hasSubLists={hasSubLists}\n          checked={node.checked}\n          value={node.value}\n          node={node}\n        >\n          {nodesToJSX({ nodes: node.children })}\n        </ListItem>\n      )\n    }\n  }\n\n  if (components.Link) {\n    const Link = components.Link\n\n    const resolveHref = (node: any): string => {\n      if (node.fields.linkType === 'internal') {\n        return internalDocToHref ? internalDocToHref({ linkNode: node }) : '#'\n      }\n      return node.fields.url ?? ''\n    }\n\n    converters.link = ({ node, nodesToJSX }) => (\n      <Link\n        href={resolveHref(node)}\n        rel={node.fields.newTab ? 'noopener noreferrer' : undefined}\n        target={node.fields.newTab ? '_blank' : undefined}\n        node={node}\n      >\n        {nodesToJSX({ nodes: node.children })}\n      </Link>\n    )\n\n    converters.autolink = ({ node, nodesToJSX }) => (\n      <Link\n        href={node.fields.url ?? ''}\n        rel={node.fields.newTab ? 'noopener noreferrer' : undefined}\n        target={node.fields.newTab ? '_blank' : undefined}\n        node={node}\n      >\n        {nodesToJSX({ nodes: node.children })}\n      </Link>\n    )\n  }\n\n  if (components.HorizontalRule) {\n    const HorizontalRule = components.HorizontalRule\n    converters.horizontalrule = <HorizontalRule />\n  }\n\n  if (components.Upload) {\n    const Upload = components.Upload\n    converters.upload = ({ node }) => {\n      const uploadNode = node as any\n      if (typeof uploadNode.value !== 'object') return null\n      const doc = uploadNode.value\n      return (\n        <Upload\n          src={doc.url}\n          alt={uploadNode.fields?.alt || doc?.alt || ''}\n          width={doc.width}\n          height={doc.height}\n          mimeType={doc.mimeType}\n          filename={doc.filename}\n          sizes={doc.sizes}\n          node={node}\n        />\n      )\n    }\n  }\n\n  if (components.Table) {\n    const Table = components.Table\n    converters.table = ({ node, nodesToJSX }) => (\n      <Table node={node}>{nodesToJSX({ nodes: node.children })}</Table>\n    )\n  }\n\n  if (components.TableRow) {\n    const TableRow = components.TableRow\n    converters.tablerow = ({ node, nodesToJSX }) => (\n      <TableRow node={node}>{nodesToJSX({ nodes: node.children })}</TableRow>\n    )\n  }\n\n  if (components.TableCell) {\n    const TableCell = components.TableCell\n    converters.tablecell = ({ node, nodesToJSX }) => (\n      <TableCell\n        tag={node.headerState > 0 ? 'th' : 'td'}\n        colSpan={node.colSpan > 1 ? node.colSpan : undefined}\n        rowSpan={node.rowSpan > 1 ? node.rowSpan : undefined}\n        backgroundColor={node.backgroundColor || undefined}\n        node={node}\n      >\n        {nodesToJSX({ nodes: node.children })}\n      </TableCell>\n    )\n  }\n\n  return converters\n}\n\nexport function StyledRichTextContent({\n  components = {},\n  internalDocToHref,\n  blocks,\n  textState,\n  ...props\n}: StyledRichTextContentProps) {\n  const converters = createComponentConverters(components, internalDocToHref)\n\n  return (\n    <RichTextContent\n      {...props}\n      internalDocToHref={internalDocToHref}\n      converters={converters}\n      blocks={blocks}\n      textState={textState}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAkB;AASlB,IAAAA,gBAOO;;;ACfP,mBAAkB;AAwGlB,SAAS,0BACP,YACA,mBACwB;AACxB,QAAM,aAAqC,CAAC;AAE5C,MAAI,WAAW,SAAS;AACtB,UAAM,UAAU,WAAW;AAC3B,eAAW,UAAU,CAAC,EAAE,MAAM,WAAW,MACvC,6BAAAC,QAAA,cAAC,WAAQ,KAAK,KAAK,KAAK,QACrB,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC,CACtC;AAAA,EAEJ;AAEA,MAAI,WAAW,WAAW;AACxB,UAAM,YAAY,WAAW;AAC7B,eAAW,YAAY,CAAC,EAAE,MAAM,WAAW,MAAM;AAC/C,YAAM,WAAW,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC;AACpD,aACE,6BAAAA,QAAA,cAAC,aAAU,SAAS,EAAC,qCAAU,SAAQ,SACpC,qCAAU,UAAS,WAAW,6BAAAA,QAAA,cAAC,UAAG,CACrC;AAAA,IAEJ;AAAA,EACF;AAEA,MAAI,WAAW,YAAY;AACzB,UAAM,aAAa,WAAW;AAC9B,eAAW,QAAQ,CAAC,EAAE,MAAM,WAAW,MACrC,6BAAAA,QAAA,cAAC,cAAW,QACT,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC,CACtC;AAAA,EAEJ;AAEA,MAAI,WAAW,MAAM;AACnB,UAAM,OAAO,WAAW;AACxB,eAAW,OAAO,CAAC,EAAE,MAAM,WAAW,MACpC,6BAAAA,QAAA,cAAC,QAAK,KAAK,KAAK,KAAK,UAAU,KAAK,UAAU,QAC3C,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC,CACtC;AAAA,EAEJ;AAEA,MAAI,WAAW,UAAU;AACvB,UAAM,WAAW,WAAW;AAC5B,eAAW,WAAW,CAAC,EAAE,MAAM,WAAW,MAAM;AAC9C,YAAM,cAAc,KAAK,SAAS;AAAA,QAChC,CAAC,UAA4B,MAAM,SAAS;AAAA,MAC9C;AACA,aACE,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS,KAAK;AAAA,UACd,OAAO,KAAK;AAAA,UACZ;AAAA;AAAA,QAEC,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC;AAAA,MACtC;AAAA,IAEJ;AAAA,EACF;AAEA,MAAI,WAAW,MAAM;AACnB,UAAM,OAAO,WAAW;AAExB,UAAM,cAAc,CAAC,SAAsB;AA9K/C;AA+KM,UAAI,KAAK,OAAO,aAAa,YAAY;AACvC,eAAO,oBAAoB,kBAAkB,EAAE,UAAU,KAAK,CAAC,IAAI;AAAA,MACrE;AACA,cAAO,UAAK,OAAO,QAAZ,YAAmB;AAAA,IAC5B;AAEA,eAAW,OAAO,CAAC,EAAE,MAAM,WAAW,MACpC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,YAAY,IAAI;AAAA,QACtB,KAAK,KAAK,OAAO,SAAS,wBAAwB;AAAA,QAClD,QAAQ,KAAK,OAAO,SAAS,WAAW;AAAA,QACxC;AAAA;AAAA,MAEC,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC;AAAA,IACtC;AAGF,eAAW,WAAW,CAAC,EAAE,MAAM,WAAW,MAAG;AAhMjD;AAiMM,0CAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM,UAAK,OAAO,QAAZ,YAAmB;AAAA,UACzB,KAAK,KAAK,OAAO,SAAS,wBAAwB;AAAA,UAClD,QAAQ,KAAK,OAAO,SAAS,WAAW;AAAA,UACxC;AAAA;AAAA,QAEC,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC;AAAA,MACtC;AAAA;AAAA,EAEJ;AAEA,MAAI,WAAW,gBAAgB;AAC7B,UAAM,iBAAiB,WAAW;AAClC,eAAW,iBAAiB,6BAAAA,QAAA,cAAC,oBAAe;AAAA,EAC9C;AAEA,MAAI,WAAW,QAAQ;AACrB,UAAM,SAAS,WAAW;AAC1B,eAAW,SAAS,CAAC,EAAE,KAAK,MAAM;AAnNtC;AAoNM,YAAM,aAAa;AACnB,UAAI,OAAO,WAAW,UAAU,SAAU,QAAO;AACjD,YAAM,MAAM,WAAW;AACvB,aACE,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,IAAI;AAAA,UACT,OAAK,gBAAW,WAAX,mBAAmB,SAAO,2BAAK,QAAO;AAAA,UAC3C,OAAO,IAAI;AAAA,UACX,QAAQ,IAAI;AAAA,UACZ,UAAU,IAAI;AAAA,UACd,UAAU,IAAI;AAAA,UACd,OAAO,IAAI;AAAA,UACX;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EACF;AAEA,MAAI,WAAW,OAAO;AACpB,UAAM,QAAQ,WAAW;AACzB,eAAW,QAAQ,CAAC,EAAE,MAAM,WAAW,MACrC,6BAAAA,QAAA,cAAC,SAAM,QAAa,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC,CAAE;AAAA,EAE7D;AAEA,MAAI,WAAW,UAAU;AACvB,UAAM,WAAW,WAAW;AAC5B,eAAW,WAAW,CAAC,EAAE,MAAM,WAAW,MACxC,6BAAAA,QAAA,cAAC,YAAS,QAAa,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC,CAAE;AAAA,EAEhE;AAEA,MAAI,WAAW,WAAW;AACxB,UAAM,YAAY,WAAW;AAC7B,eAAW,YAAY,CAAC,EAAE,MAAM,WAAW,MACzC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK,cAAc,IAAI,OAAO;AAAA,QACnC,SAAS,KAAK,UAAU,IAAI,KAAK,UAAU;AAAA,QAC3C,SAAS,KAAK,UAAU,IAAI,KAAK,UAAU;AAAA,QAC3C,iBAAiB,KAAK,mBAAmB;AAAA,QACzC;AAAA;AAAA,MAEC,WAAW,EAAE,OAAO,KAAK,SAAS,CAAC;AAAA,IACtC;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,sBAAsB,IAMP;AANO,eACpC;AAAA,iBAAa,CAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EA1QF,IAsQsC,IAKjC,kBALiC,IAKjC;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,aAAa,0BAA0B,YAAY,iBAAiB;AAE1E,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA,qCACK,QADL;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;;;AD/MA,SAAS,cAAc,KAAqB;AAC1C,SAAO,IAAI,QAAQ,aAAa,CAAC,GAAG,MAAM,EAAE,YAAY,CAAC;AAC3D;AAEA,SAAS,yBACP,OACuB;AACvB,QAAM,uBAAuB,+BAAiB;AAE9C,SAAO,CAAC,OAAsB;AAAtB,iBAAE,OAlFZ,IAkFU,IAAW,iBAAX,IAAW,CAAT;AAlFZ,QAAAC,KAAAC;AAmFI,UAAM,OACJ,qBACA,iBAAE,QAAS,KAAM;AACnB,UAAM,YAAa,KAAiC;AAGpD,QAAI,CAAC,aAAa,OAAO,cAAc,SAAU,QAAO;AAExD,UAAM,QAAgC,CAAC;AACvC,eAAW,YAAY,WAAW;AAChC,YAAM,aAAa,UAAU,QAAQ;AACrC,UAAI,CAAC,WAAY;AACjB,YAAM,OAAMA,OAAAD,MAAA,MAAM,QAAQ,MAAd,gBAAAA,IAAkB,gBAAlB,gBAAAC,IAA+B;AAC3C,UAAI,KAAK;AACP,mBAAW,QAAQ,KAAK;AACtB,gBAAM,MAAM,IAAI,IAAI;AACpB,cAAI,IAAK,OAAM,cAAc,IAAI,CAAC,IAAI;AAAA,QACxC;AAAA,MACF;AAAA,IACF;AAEA,QAAI,OAAO,KAAK,KAAK,EAAE,WAAW,EAAG,QAAO;AAC5C,WAAO,8BAAAC,QAAA,cAAC,UAAK,SAAe,IAAK;AAAA,EACnC;AACF;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,iBAAgC,+EAChC,2BAA2B,CAAC,IAAI,yCACjC,gCAAiB,EAAE,kBAAkB,CAAC,IACrC,YAAY,EAAE,MAAM,yBAAyB,SAAS,EAAE,IAAI,CAAC,IAC9D,aACC,SAAS,EAAE,OAAO,IAAI,CAAC;AAG7B,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY;AAAA;AAAA,EACd;AAEJ;","names":["import_react","React","_a","_b","React"]}
+{"version":3,"sources":["../../src/ui/RichText/index.tsx","../../src/ui/RichText/styled.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  SerializedBlockNode,\n  SerializedLinkNode,\n} from '@payloadcms/richtext-lexical'\nimport {\n  SerializedEditorState,\n  SerializedLexicalNode,\n} from '@payloadcms/richtext-lexical/lexical'\nimport {\n  defaultJSXConverters,\n  JSXConverter,\n  JSXConverters,\n  LinkJSXConverter,\n  RichText,\n  TextJSXConverter,\n} from '@payloadcms/richtext-lexical/react'\n\n/**\n * Accepts both Lexical's strict `SerializedEditorState` and Payload's generated\n * richText type (which includes index signatures like `[k: string]: unknown`).\n */\nexport type RichTextData = SerializedEditorState<SerializedLexicalNode> | {\n  root: {\n    type: string\n    children: { type: string; version: number; [k: string]: unknown }[]\n    direction: string | null\n    format: string\n    indent: number\n    version: number\n    [k: string]: unknown\n  }\n  [k: string]: unknown\n}\n\nexport type TextStateConfig = {\n  [stateKey: string]: {\n    [stateValue: string]: {\n      css: Record<string, string>\n      label: string\n    }\n  }\n}\n\nexport interface RichTextContentProps {\n  data: RichTextData\n  className?: string\n  internalDocToHref?: (args: { linkNode: SerializedLinkNode }) => string\n  converters?: Partial<JSXConverters>\n  blocks?: Record<string, JSXConverter<SerializedBlockNode>>\n  disableDefaultConverters?: boolean\n  textState?: TextStateConfig\n}\n\nexport { StyledRichTextContent } from './styled'\nexport type {\n  RichTextComponents,\n  StyledRichTextContentProps,\n  HeadingSlotProps,\n  ParagraphSlotProps,\n  BlockquoteSlotProps,\n  ListSlotProps,\n  ListItemSlotProps,\n  LinkSlotProps,\n  HorizontalRuleSlotProps,\n  UploadSlotProps,\n  TableSlotProps,\n  TableRowSlotProps,\n  TableCellSlotProps,\n} from './styled'\n\nfunction hyphenToCamel(str: string): string {\n  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase())\n}\n\nfunction createTextStateConverter(\n  state: TextStateConfig,\n): JSXConverters['text'] {\n  const defaultTextConverter = TextJSXConverter.text\n  // eslint-disable-next-line react/display-name\n  return ({ node, ...rest }) => {\n    const base = (\n      defaultTextConverter as (...args: unknown[]) => React.ReactNode\n    )({ node, ...rest })\n    const nodeState = (node as Record<string, unknown>).$ as\n      | Record<string, string>\n      | undefined\n    if (!nodeState || typeof nodeState !== 'object') return base\n\n    const style: Record<string, string> = {}\n    for (const stateKey in nodeState) {\n      const stateValue = nodeState[stateKey]\n      if (!stateValue) continue\n      const css = state[stateKey]?.[stateValue]?.css\n      if (css) {\n        for (const prop in css) {\n          const val = css[prop]\n          if (val) style[hyphenToCamel(prop)] = val\n        }\n      }\n    }\n\n    if (Object.keys(style).length === 0) return base\n    return <span style={style}>{base}</span>\n  }\n}\n\nexport function RichTextContent({\n  data,\n  className,\n  internalDocToHref,\n  converters,\n  blocks,\n  disableDefaultConverters,\n  textState,\n}: RichTextContentProps) {\n  const baseConverters: JSXConverters = {\n    ...(disableDefaultConverters ? {} : defaultJSXConverters),\n    ...LinkJSXConverter({ internalDocToHref }),\n    ...(textState ? { text: createTextStateConverter(textState) } : {}),\n    ...converters,\n    ...(blocks ? { blocks } : {}),\n  }\n\n  return (\n    <RichText\n      data={data as SerializedEditorState<SerializedLexicalNode>}\n      className={className}\n      converters={baseConverters}\n    />\n  )\n}\n","'use client'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react'\nimport { SerializedLinkNode } from '@payloadcms/richtext-lexical'\nimport { JSXConverters } from '@payloadcms/richtext-lexical/react'\nimport { RichTextContent, RichTextContentProps } from './index'\n\n// --- Slot prop types (each slot gets structured data + raw node) ---\n\nexport interface HeadingSlotProps {\n  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  children: React.ReactNode\n  node: any\n}\n\nexport interface ParagraphSlotProps {\n  children: React.ReactNode\n  isEmpty: boolean\n  node: any\n}\n\nexport interface BlockquoteSlotProps {\n  children: React.ReactNode\n  node: any\n}\n\nexport interface ListSlotProps {\n  tag: 'ul' | 'ol'\n  listType: string\n  children: React.ReactNode\n  node: any\n}\n\nexport interface ListItemSlotProps {\n  children: React.ReactNode\n  hasSubLists: boolean\n  checked?: boolean\n  value?: number\n  node: any\n}\n\nexport interface LinkSlotProps {\n  href: string\n  target?: string\n  rel?: string\n  children: React.ReactNode\n  node: any\n}\n\nexport interface HorizontalRuleSlotProps {\n  node?: any\n}\n\nexport interface UploadSlotProps {\n  src: string\n  alt: string\n  width?: number\n  height?: number\n  mimeType: string\n  filename: string\n  sizes?: Record<string, any>\n  node: any\n}\n\nexport interface TableSlotProps {\n  children: React.ReactNode\n  node: any\n}\n\nexport interface TableRowSlotProps {\n  children: React.ReactNode\n  node: any\n}\n\nexport interface TableCellSlotProps {\n  tag: 'th' | 'td'\n  children: React.ReactNode\n  colSpan?: number\n  rowSpan?: number\n  backgroundColor?: string\n  node: any\n}\n\n// --- Components map ---\n\nexport interface RichTextComponents {\n  Heading?: React.ComponentType<HeadingSlotProps>\n  Paragraph?: React.ComponentType<ParagraphSlotProps>\n  Blockquote?: React.ComponentType<BlockquoteSlotProps>\n  List?: React.ComponentType<ListSlotProps>\n  ListItem?: React.ComponentType<ListItemSlotProps>\n  Link?: React.ComponentType<LinkSlotProps>\n  HorizontalRule?: React.ComponentType<HorizontalRuleSlotProps>\n  Upload?: React.ComponentType<UploadSlotProps>\n  Table?: React.ComponentType<TableSlotProps>\n  TableRow?: React.ComponentType<TableRowSlotProps>\n  TableCell?: React.ComponentType<TableCellSlotProps>\n}\n\nexport interface StyledRichTextContentProps extends Omit<\n  RichTextContentProps,\n  'converters' | 'disableDefaultConverters'\n> {\n  components?: RichTextComponents\n}\n\nfunction createComponentConverters(\n  components: RichTextComponents,\n  internalDocToHref?: (args: { linkNode: SerializedLinkNode }) => string,\n): Partial<JSXConverters> {\n  const converters: Partial<JSXConverters> = {}\n\n  if (components.Heading) {\n    const Heading = components.Heading\n    converters.heading = ({ node, nodesToJSX }) => (\n      <Heading tag={node.tag} node={node}>\n        {nodesToJSX({ nodes: node.children })}\n      </Heading>\n    )\n  }\n\n  if (components.Paragraph) {\n    const Paragraph = components.Paragraph\n    converters.paragraph = ({ node, nodesToJSX }) => {\n      const children = nodesToJSX({ nodes: node.children })\n      return (\n        <Paragraph isEmpty={!children?.length} node={node}>\n          {children?.length ? children : <br />}\n        </Paragraph>\n      )\n    }\n  }\n\n  if (components.Blockquote) {\n    const Blockquote = components.Blockquote\n    converters.quote = ({ node, nodesToJSX }) => (\n      <Blockquote node={node}>\n        {nodesToJSX({ nodes: node.children })}\n      </Blockquote>\n    )\n  }\n\n  if (components.List) {\n    const List = components.List\n    converters.list = ({ node, nodesToJSX }) => (\n      <List tag={node.tag} listType={node.listType} node={node}>\n        {nodesToJSX({ nodes: node.children })}\n      </List>\n    )\n  }\n\n  if (components.ListItem) {\n    const ListItem = components.ListItem\n    converters.listitem = ({ node, nodesToJSX }) => {\n      const hasSubLists = node.children.some(\n        (child: { type: string }) => child.type === 'list',\n      )\n      return (\n        <ListItem\n          hasSubLists={hasSubLists}\n          checked={node.checked}\n          value={node.value}\n          node={node}\n        >\n          {nodesToJSX({ nodes: node.children })}\n        </ListItem>\n      )\n    }\n  }\n\n  if (components.Link) {\n    const Link = components.Link\n\n    const resolveHref = (node: any): string => {\n      if (node.fields.linkType === 'internal') {\n        return internalDocToHref ? internalDocToHref({ linkNode: node }) : '#'\n      }\n      return node.fields.url ?? ''\n    }\n\n    converters.link = ({ node, nodesToJSX }) => (\n      <Link\n        href={resolveHref(node)}\n        rel={node.fields.newTab ? 'noopener noreferrer' : undefined}\n        target={node.fields.newTab ? '_blank' : undefined}\n        node={node}\n      >\n        {nodesToJSX({ nodes: node.children })}\n      </Link>\n    )\n\n    converters.autolink = ({ node, nodesToJSX }) => (\n      <Link\n        href={node.fields.url ?? ''}\n        rel={node.fields.newTab ? 'noopener noreferrer' : undefined}\n        target={node.fields.newTab ? '_blank' : undefined}\n        node={node}\n      >\n        {nodesToJSX({ nodes: node.children })}\n      </Link>\n    )\n  }\n\n  if (components.HorizontalRule) {\n    const HorizontalRule = components.HorizontalRule\n    converters.horizontalrule = <HorizontalRule />\n  }\n\n  if (components.Upload) {\n    const Upload = components.Upload\n    converters.upload = ({ node }) => {\n      const uploadNode = node as any\n      if (typeof uploadNode.value !== 'object') return null\n      const doc = uploadNode.value\n      return (\n        <Upload\n          src={doc.url}\n          alt={uploadNode.fields?.alt || doc?.alt || ''}\n          width={doc.width}\n          height={doc.height}\n          mimeType={doc.mimeType}\n          filename={doc.filename}\n          sizes={doc.sizes}\n          node={node}\n        />\n      )\n    }\n  }\n\n  if (components.Table) {\n    const Table = components.Table\n    converters.table = ({ node, nodesToJSX }) => (\n      <Table node={node}>{nodesToJSX({ nodes: node.children })}</Table>\n    )\n  }\n\n  if (components.TableRow) {\n    const TableRow = components.TableRow\n    converters.tablerow = ({ node, nodesToJSX }) => (\n      <TableRow node={node}>{nodesToJSX({ nodes: node.children })}</TableRow>\n    )\n  }\n\n  if (components.TableCell) {\n    const TableCell = components.TableCell\n    converters.tablecell = ({ node, nodesToJSX }) => (\n      <TableCell\n        tag={node.headerState > 0 ? 'th' : 'td'}\n        colSpan={node.colSpan > 1 ? node.colSpan : undefined}\n        rowSpan={node.rowSpan > 1 ? node.rowSpan : undefined}\n        backgroundColor={node.backgroundColor || undefined}\n        node={node}\n      >\n        {nodesToJSX({ nodes: node.children })}\n      </TableCell>\n    )\n  }\n\n  return converters\n}\n\nexport function StyledRichTextContent({\n  components = {},\n  internalDocToHref,\n  blocks,\n  textState,\n  ...props\n}: StyledRichTextContentProps) {\n  const converters = createComponentConverters(components, internalDocToHref)\n\n  return (\n    <RichTextContent\n      {...props}\n      internalDocToHref={internalDocToHref}\n      converters={converters}\n      blocks={blocks}\n      textState={textState}\n    />\n  )\n}\n"],"mappings":"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","names":["import_react","React","React"]}