@fangxinyan/lumina 0.6.17 → 0.7.0

package/dist/chunk-Y22PTPA7.js

@@ -0,0 +1,800 @@
+import { useOverlayZIndex, useOverlayLayer, OverlayZIndexProvider } from './chunk-2A4GYSN4.js';
+import { IconButton, Button } from './chunk-JHM7MN3G.js';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Image-CZJPPURT.css';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var PREVIEW_MIN_SCALE = 0.2;
+var PREVIEW_MAX_SCALE = 5;
+var PREVIEW_ZOOM_STEP = 0.2;
+var IMAGE_DOWNLOAD_EXT_BY_MIME = {
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/png": "png",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/svg+xml": "svg",
+  "image/avif": "avif"
+};
+var IMAGE_MIME_BY_EXT = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  svg: "image/svg+xml",
+  avif: "image/avif"
+};
+var PREVIEW_THEME_ATTRS = ["data-theme", "data-theme-mode", "data-accent", "data-density"];
+var PREVIEW_THEME_VARS = [
+  "--bg",
+  "--bg-raised",
+  "--fg",
+  "--fg-muted",
+  "--fg-subtle",
+  "--border",
+  "--mask-bg",
+  "--accent",
+  "--accent-ink",
+  "--accent-soft",
+  "--accent-glow",
+  "--neu-float",
+  "--neu-shadow-float",
+  "--neu-shadow-subtle",
+  "--neu-shadow-inset-strong",
+  "--ctrl-h-sm",
+  "--ctrl-pad-x-sm",
+  "--r-sm",
+  "--r-lg",
+  "--r-pill",
+  "--gap-2",
+  "--gap-4",
+  "--gap-5",
+  "--gap-8",
+  "--font-mono",
+  "--fs-sm",
+  "--dur-fast",
+  "--dur",
+  "--ease"
+];
+var clampPreviewScale = (value) => Math.min(PREVIEW_MAX_SCALE, Math.max(PREVIEW_MIN_SCALE, Math.round(value * 100) / 100));
+var sanitizeImageFilename = (value) => {
+  const fallback = value.trim().replace(/\s+/g, "-").replace(/[\\/:*?"<>|#%{}^~[\]`]/g, "-");
+  return fallback.replace(/-+/g, "-").replace(/^-|-$/g, "") || "image";
+};
+var getDataUrlImageExt = (src) => {
+  const mime = /^data:([^;,]+)/.exec(src)?.[1]?.toLowerCase();
+  return mime ? IMAGE_DOWNLOAD_EXT_BY_MIME[mime] : void 0;
+};
+var getImageMimeFromSrc = (src) => {
+  const cleanSrc = src.split(/[?#]/)[0] || "";
+  const ext = /\.([a-z0-9]+)$/i.exec(cleanSrc)?.[1]?.toLowerCase();
+  return ext ? IMAGE_MIME_BY_EXT[ext] : void 0;
+};
+var getImageDownloadName = (src, alt) => {
+  const dataExt = getDataUrlImageExt(src);
+  if (dataExt) return `${sanitizeImageFilename(alt || "image")}.${dataExt}`;
+  try {
+    const url = new URL(src, typeof window !== "undefined" ? window.location.href : "http://localhost");
+    const parts = url.pathname.split("/").filter(Boolean);
+    const segment = decodeURIComponent(parts[parts.length - 1] || "");
+    if (segment) return sanitizeImageFilename(segment);
+  } catch {
+    const parts = src.split(/[?#]/)[0]?.split("/").filter(Boolean);
+    const segment = parts?.[parts.length - 1];
+    if (segment) return sanitizeImageFilename(segment);
+  }
+  return `${sanitizeImageFilename(alt || "image")}.png`;
+};
+var getClipboardItemCtor = () => {
+  if (typeof ClipboardItem === "undefined") return void 0;
+  return ClipboardItem;
+};
+var isClipboardImageMimeSupported = (mime, ClipboardItemImpl) => {
+  const normalized = mime.toLowerCase();
+  if (!normalized.startsWith("image/")) return false;
+  return ClipboardItemImpl.supports?.(normalized) ?? normalized === "image/png";
+};
+var dataUrlToImageBlob = (src) => {
+  const match = /^data:([^;,]+)((?:;[^,]*)?),(.*)$/i.exec(src);
+  if (!match) return void 0;
+  const mime = match[1].toLowerCase();
+  if (!mime.startsWith("image/")) return void 0;
+  const metadata = match[2].toLowerCase();
+  const payload = match[3];
+  if (metadata.includes(";base64")) {
+    const binary = atob(payload.replace(/\s/g, ""));
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index += 1) {
+      bytes[index] = binary.charCodeAt(index);
+    }
+    return new Blob([bytes], { type: mime });
+  }
+  return new Blob([decodeURIComponent(payload)], { type: mime });
+};
+var readImageBlob = async (src) => {
+  const dataBlob = dataUrlToImageBlob(src);
+  if (dataBlob) return dataBlob;
+  if (typeof fetch === "undefined") return void 0;
+  const response = await fetch(src);
+  if (!response.ok) return void 0;
+  const blob = await response.blob();
+  const mime = blob.type.toLowerCase() || getImageMimeFromSrc(src);
+  if (!mime?.startsWith("image/")) return void 0;
+  return blob.type ? blob : new Blob([blob], { type: mime });
+};
+var convertImageBlobToPng = (blob) => new Promise((resolve) => {
+  if (typeof document === "undefined" || typeof URL === "undefined") {
+    resolve(void 0);
+    return;
+  }
+  const objectUrl = URL.createObjectURL(blob);
+  const image = document.createElement("img");
+  const cleanup = () => URL.revokeObjectURL(objectUrl);
+  image.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      cleanup();
+      resolve(void 0);
+      return;
+    }
+    context.drawImage(image, 0, 0);
+    canvas.toBlob((pngBlob) => {
+      cleanup();
+      resolve(pngBlob ?? void 0);
+    }, "image/png");
+  };
+  image.onerror = () => {
+    cleanup();
+    resolve(void 0);
+  };
+  image.src = objectUrl;
+});
+var prepareClipboardImageBlob = async (blob, ClipboardItemImpl) => {
+  const sourceSupported = isClipboardImageMimeSupported(blob.type, ClipboardItemImpl);
+  if (blob.type === "image/png") return sourceSupported ? blob : void 0;
+  const pngBlob = await convertImageBlobToPng(blob);
+  if (pngBlob && isClipboardImageMimeSupported(pngBlob.type, ClipboardItemImpl)) {
+    return pngBlob;
+  }
+  return sourceSupported ? blob : void 0;
+};
+var fallbackCopyText = (text) => {
+  if (typeof document === "undefined") return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.top = "-9999px";
+  textarea.style.left = "-9999px";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  const copied = document.execCommand?.("copy") ?? false;
+  textarea.remove();
+  return copied;
+};
+var copyText = (text) => {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      void Promise.resolve(navigator.clipboard.writeText(text)).catch(
+        () => fallbackCopyText(text)
+      );
+    } catch {
+      fallbackCopyText(text);
+    }
+    return;
+  }
+  fallbackCopyText(text);
+};
+var copyImageToClipboard = async (src) => {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.write) return false;
+  const ClipboardItemImpl = getClipboardItemCtor();
+  if (!ClipboardItemImpl) return false;
+  try {
+    const sourceBlob = await readImageBlob(src);
+    if (!sourceBlob) return false;
+    const clipboardBlob = await prepareClipboardImageBlob(sourceBlob, ClipboardItemImpl);
+    if (!clipboardBlob) return false;
+    await navigator.clipboard.write([
+      new ClipboardItemImpl({ [clipboardBlob.type]: clipboardBlob })
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var copyImage = async (src) => {
+  const copiedImage = await copyImageToClipboard(src);
+  if (!copiedImage) copyText(src);
+};
+var triggerImageDownload = (src, filename) => {
+  if (typeof document === "undefined") return;
+  const anchor = document.createElement("a");
+  anchor.href = src;
+  anchor.download = filename;
+  anchor.rel = "noopener noreferrer";
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+};
+var readPreviewThemeBridge = (source) => {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return { attrs: {}, style: {} };
+  }
+  const anchor = source ?? document.documentElement;
+  const attrs = {};
+  for (const attr of PREVIEW_THEME_ATTRS) {
+    const owner = anchor.closest(`[${attr}]`) ?? document.documentElement;
+    const value = owner.getAttribute(attr);
+    if (value) attrs[attr] = value;
+  }
+  const computed = window.getComputedStyle(anchor);
+  const style = {};
+  for (const variable of PREVIEW_THEME_VARS) {
+    const value = computed.getPropertyValue(variable).trim();
+    if (value) style[variable] = value;
+  }
+  return { attrs, style };
+};
+var ImageBase = React.forwardRef(({
+  src,
+  alt,
+  width = 200,
+  height,
+  variant = "framed",
+  frame,
+  padding,
+  objectFit,
+  objectPosition,
+  preview,
+  previewClassName = "",
+  previewStyle,
+  previewMaxWidth = "80vw",
+  previewMaxHeight = "80vh",
+  renderPreviewToolbar,
+  hover = true,
+  placeholder,
+  imgProps,
+  className = "",
+  style,
+  onClick,
+  onKeyDown,
+  ...rest
+}, ref) => {
+  const [loaded, setLoaded] = React.useState(false);
+  const [err, setErr] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [previewScale, setPreviewScale] = React.useState(1);
+  const [previewMode, setPreviewMode] = React.useState("fit");
+  const [previewOffset, setPreviewOffset] = React.useState({ x: 0, y: 0 });
+  const [previewDragging, setPreviewDragging] = React.useState(false);
+  const [previewTheme, setPreviewTheme] = React.useState({ attrs: {}, style: {} });
+  const rootRef = React.useRef(null);
+  const imageRef = React.useRef(null);
+  const overlayRef = React.useRef(null);
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme(["Image", "ImageGrid"]);
+  const explicitPreviewZIndex = typeof previewStyle?.zIndex === "number" ? previewStyle.zIndex : void 0;
+  const previewZIndex = useOverlayZIndex(open, explicitPreviewZIndex);
+  const dragRef = React.useRef(null);
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedHeight = height ?? (variant === "icon" ? width : 140);
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  const resolvedObjectFit = objectFit ?? (variant === "icon" ? "contain" : "cover");
+  const canPreview = (preview ?? variant === "framed") && loaded && !err;
+  const {
+    className: imgClassName = "",
+    style: imgStyle,
+    onLoad,
+    onError,
+    ...imageRest
+  } = imgProps ?? {};
+  const setRootRef = React.useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  React.useEffect(() => {
+    setLoaded(false);
+    setErr(false);
+    setOpen(false);
+  }, [src]);
+  React.useEffect(() => {
+    const image = imageRef.current;
+    if (!image || loaded || err) return;
+    if (image.complete) {
+      if (image.naturalWidth > 0) {
+        setLoaded(true);
+      } else {
+        setErr(true);
+      }
+    }
+  }, [src, loaded, err]);
+  React.useEffect(() => {
+    if (open) overlayRef.current?.focus();
+  }, [open]);
+  const resetPreview = React.useCallback(() => {
+    setPreviewScale(1);
+    setPreviewOffset({ x: 0, y: 0 });
+  }, []);
+  const fitToWindow = React.useCallback(() => {
+    setPreviewMode("fit");
+    resetPreview();
+  }, [resetPreview]);
+  const actualSize = React.useCallback(() => {
+    setPreviewMode("actual");
+    resetPreview();
+  }, [resetPreview]);
+  const zoomIn = React.useCallback(() => {
+    setPreviewScale((current) => clampPreviewScale(current + PREVIEW_ZOOM_STEP));
+  }, []);
+  const zoomOut = React.useCallback(() => {
+    setPreviewScale((current) => clampPreviewScale(current - PREVIEW_ZOOM_STEP));
+  }, []);
+  const closePreview = React.useCallback(() => {
+    dragRef.current = null;
+    setPreviewDragging(false);
+    setOpen(false);
+    window.requestAnimationFrame(() => rootRef.current?.focus());
+  }, []);
+  React.useEffect(() => {
+    if (open && !canPreview) closePreview();
+  }, [canPreview, closePreview, open]);
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: overlayRef,
+    ownerRef: rootRef,
+    zIndex: previewZIndex,
+    onEscape: closePreview,
+    trapFocus: true,
+    autoFocus: true,
+    lockScroll: true
+  });
+  const openPreview = React.useCallback(() => {
+    setPreviewMode("fit");
+    resetPreview();
+    setPreviewTheme(readPreviewThemeBridge(rootRef.current));
+    setOpen(true);
+  }, [resetPreview]);
+  const copyImageSrc = React.useCallback((event) => {
+    event.stopPropagation();
+    if (!src) return;
+    void copyImage(src);
+  }, [src]);
+  const downloadImageSrc = React.useCallback((event) => {
+    event.stopPropagation();
+    if (!src) return;
+    triggerImageDownload(src, getImageDownloadName(src, alt));
+  }, [alt, src]);
+  const handlePreviewWheel = React.useCallback((event) => {
+    event.preventDefault();
+    if (event.deltaY < 0) {
+      zoomIn();
+    } else {
+      zoomOut();
+    }
+  }, [zoomIn, zoomOut]);
+  const startPreviewDrag = React.useCallback((event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    dragRef.current = {
+      startX: event.clientX,
+      startY: event.clientY,
+      baseX: previewOffset.x,
+      baseY: previewOffset.y
+    };
+    setPreviewDragging(true);
+  }, [previewOffset.x, previewOffset.y]);
+  const movePreviewDrag = React.useCallback((event) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    event.preventDefault();
+    setPreviewOffset({
+      x: drag.baseX + event.clientX - drag.startX,
+      y: drag.baseY + event.clientY - drag.startY
+    });
+  }, []);
+  const endPreviewDrag = React.useCallback(() => {
+    dragRef.current = null;
+    setPreviewDragging(false);
+  }, []);
+  const handlePreviewKeyDown = React.useCallback((event) => {
+    if (event.key === "Escape") {
+      closePreview();
+    }
+    if (event.key === "+" || event.key === "=") {
+      zoomIn();
+    }
+    if (event.key === "-") {
+      zoomOut();
+    }
+  }, [closePreview, zoomIn, zoomOut]);
+  const previewToolbarProps = {
+    scale: previewScale,
+    mode: previewMode,
+    zoomIn,
+    zoomOut,
+    fitToWindow,
+    actualSize,
+    reset: resetPreview,
+    close: closePreview
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRootRef,
+        className: `n-image ${variant} ${visualFrame ? "framed" : "unframed"} ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
+        style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+        role: canPreview ? "button" : void 0,
+        tabIndex: canPreview ? 0 : void 0,
+        "aria-label": canPreview ? `\u9884\u89C8${alt ? `\uFF1A${alt}` : "\u56FE\u7247"}` : void 0,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented && canPreview) openPreview();
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!event.defaultPrevented && event.target === event.currentTarget && canPreview && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            openPreview();
+          }
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: "n-image-frame", style: { width: "100%", height: resolvedHeight }, children: [
+          !err && src && /* @__PURE__ */ jsx(
+            "img",
+            {
+              ...imageRest,
+              ref: imageRef,
+              src,
+              alt,
+              className: imgClassName,
+              style: { objectFit: resolvedObjectFit, objectPosition, ...imgStyle },
+              onLoad: (event) => {
+                setLoaded(true);
+                onLoad?.(event);
+              },
+              onError: (event) => {
+                setErr(true);
+                onError?.(event);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsx(Icon, { name: "image", size: 28 }) }),
+          canPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "image-hint", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "eye", size: 14 }),
+              /* @__PURE__ */ jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: src && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ia-btn",
+                  onClick: copyImageSrc,
+                  "aria-label": "\u590D\u5236\u56FE\u7247",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: 13 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ia-btn",
+                  onClick: downloadImageSrc,
+                  "aria-label": "\u4E0B\u8F7D",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "download", size: 13 })
+                }
+              )
+            ] }) })
+          ] })
+        ] })
+      }
+    ),
+    open && portalContainer && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(OverlayZIndexProvider, { zIndex: previewZIndex, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...previewTheme.attrs,
+          ...portalTheme.dataAttributes,
+          ref: overlayRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "\u56FE\u7247\u9884\u89C8",
+          tabIndex: -1,
+          className: ["image-preview-overlay", previewClassName].filter(Boolean).join(" "),
+          style: {
+            ...previewTheme.style,
+            ...portalTheme.style,
+            ...portalTheme.styles.overlay,
+            ...previewStyle,
+            zIndex: previewStyle?.zIndex ?? previewZIndex
+          },
+          onClick: closePreview,
+          onWheel: handlePreviewWheel,
+          onMouseMove: movePreviewDrag,
+          onMouseUp: endPreviewDrag,
+          onMouseLeave: endPreviewDrag,
+          onKeyDown: handlePreviewKeyDown,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "image-preview-toolbar",
+                role: "toolbar",
+                "aria-label": "\u56FE\u7247\u9884\u89C8\u5DE5\u5177\u680F",
+                onClick: (event) => event.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: ["IconButton", "Button"], children: [
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: "minus",
+                        size: "sm",
+                        variant: "ghost",
+                        tip: "\u7F29\u5C0F",
+                        disabled: previewScale <= PREVIEW_MIN_SCALE,
+                        onClick: zoomOut
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "image-preview-scale", "aria-live": "polite", children: [
+                      Math.round(previewScale * 100),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: "plus",
+                        size: "sm",
+                        variant: "ghost",
+                        tip: "\u653E\u5927",
+                        disabled: previewScale >= PREVIEW_MAX_SCALE,
+                        onClick: zoomIn
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "ghost",
+                        className: "image-preview-ratio",
+                        "aria-label": "\u9002\u914D\u7A97\u53E3",
+                        onClick: fitToWindow,
+                        children: "\u9002\u914D"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "ghost",
+                        className: "image-preview-ratio",
+                        "aria-label": "1:1",
+                        onClick: actualSize,
+                        children: "1:1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: "reload",
+                        size: "sm",
+                        variant: "ghost",
+                        tip: "\u91CD\u7F6E",
+                        onClick: resetPreview
+                      }
+                    )
+                  ] }),
+                  renderPreviewToolbar && /* @__PURE__ */ jsx("span", { className: "image-preview-toolbar-slot", children: renderPreviewToolbar(previewToolbarProps) }),
+                  /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "IconButton", children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: "x",
+                      size: "sm",
+                      variant: "ghost",
+                      tip: "\u5173\u95ED",
+                      onClick: closePreview
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: "image-preview-img",
+                src,
+                alt,
+                draggable: false,
+                style: {
+                  maxWidth: previewMode === "fit" ? previewMaxWidth : "none",
+                  maxHeight: previewMode === "fit" ? previewMaxHeight : "none",
+                  transform: `translate3d(${previewOffset.x}px, ${previewOffset.y}px, 0) scale(${previewScale})`,
+                  cursor: previewDragging ? "grabbing" : "grab"
+                },
+                onClick: (e) => e.stopPropagation(),
+                onMouseDown: startPreviewDrag
+              }
+            )
+          ]
+        }
+      ) }),
+      portalContainer
+    )
+  ] });
+});
+ImageBase.displayName = "Image";
+var Image = withComponentTheme(
+  ImageBase,
+  "Image",
+  ["image", "button"]
+);
+var ImageGridBase = React.forwardRef(({
+  images,
+  columns,
+  itemHeight = 130,
+  minItemWidth = 160,
+  gap = 14,
+  imageProps,
+  className = "",
+  style,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className,
+    style: {
+      display: "grid",
+      gap,
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : `repeat(auto-fill, minmax(${typeof minItemWidth === "number" ? `${minItemWidth}px` : minItemWidth}, 1fr))`,
+      ...style
+    },
+    ...rest,
+    children: images.map((img, i) => /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Image", children: /* @__PURE__ */ jsx(
+      Image,
+      {
+        ...imageProps,
+        ...img,
+        src: img.src,
+        alt: img.alt,
+        width: img.width ?? "100%",
+        height: img.height ?? itemHeight
+      }
+    ) }, i))
+  }
+));
+ImageGridBase.displayName = "ImageGrid";
+var ImageGrid = withComponentTheme(
+  ImageGridBase,
+  "ImageGrid",
+  ["image", "button"]
+);
+var SpriteImageBase = React.forwardRef(({
+  src,
+  sprite,
+  alt,
+  width,
+  height,
+  scale = 1,
+  backgroundSize,
+  variant = "icon",
+  frame,
+  padding,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedWidth = width ?? sprite.width * scale;
+  const resolvedHeight = height ?? sprite.height * scale;
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `n-sprite-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
+      role: alt ? "img" : void 0,
+      "aria-label": alt || void 0,
+      "aria-hidden": alt === "" ? true : void 0,
+      style: { width: resolvedWidth, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "n-sprite-image-frame", style: { height: resolvedHeight }, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "n-sprite-image-sprite",
+          style: {
+            width: sprite.width,
+            height: sprite.height,
+            backgroundImage: `url(${JSON.stringify(src)})`,
+            backgroundPosition: `${-sprite.x}px ${-sprite.y}px`,
+            backgroundSize,
+            transform: scale !== 1 ? `scale(${scale})` : void 0
+          }
+        }
+      ) })
+    }
+  );
+});
+SpriteImageBase.displayName = "SpriteImage";
+var SpriteImage = withComponentTheme(
+  SpriteImageBase,
+  "SpriteImage",
+  "image"
+);
+var insetStyle = (inset) => {
+  if (inset == null) return { inset: 0 };
+  if (typeof inset === "number" || typeof inset === "string") return { inset };
+  return inset;
+};
+var LayeredImageBase = React.forwardRef(({
+  layers,
+  width = 64,
+  height = 64,
+  variant = "icon",
+  frame,
+  padding,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const visualFrame = frame ?? variant === "framed";
+  const resolvedPadding = padding ?? (visualFrame ? void 0 : 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `n-layered-image ${variant} ${visualFrame ? "framed" : "unframed"} ${className}`,
+      style: { width, ...resolvedPadding !== void 0 ? { padding: resolvedPadding } : {}, ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "n-layered-image-frame", style: { height }, children: layers.map(({ src: layerSrc, alt: layerAlt = "", fit = "contain", inset, zIndex, className: layerClassName = "", style: layerStyle, ...layerRest }, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "n-layered-image-layer",
+          style: {
+            zIndex,
+            ...insetStyle(inset)
+          },
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              ...layerRest,
+              src: layerSrc,
+              alt: layerAlt,
+              className: layerClassName,
+              style: {
+                objectFit: fit,
+                ...layerStyle
+              }
+            }
+          )
+        },
+        `${layerSrc}-${index}`
+      )) })
+    }
+  );
+});
+LayeredImageBase.displayName = "LayeredImage";
+var LayeredImage = withComponentTheme(
+  LayeredImageBase,
+  "LayeredImage",
+  "image"
+);
+
+export { Image, ImageGrid, LayeredImage, SpriteImage };