@ifhover/leaf-ui 0.0.0-stage → 0.5.0

package/dist/esm/browser/modules/image/image.js

@@ -0,0 +1,192 @@
+"use client";
+import '../../../styles/components/image.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ImageOff, Scan } from "lucide-react";
+import { Suspense, createContext, forwardRef, lazy, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Loading } from "../loading/index.js";
+import { classes } from "../shared/classes.js";
+import { useMergedRef } from "../shared/field.js";
+import { useClient } from "../shared/use-client.js";
+import { useControllable } from "../shared/use-controllable.js";
+import { useText } from "../shared/use-text.js";
+const Viewer = /*#__PURE__*/ lazy(()=>import("./viewer.js").then((module)=>({
+            default: module.ImageViewer
+        })));
+function ImagePreview(props) {
+    const client = useClient();
+    const [visited, setVisited] = useState(props.open);
+    useEffect(()=>{
+        if (props.open) setVisited(true);
+    }, [
+        props.open
+    ]);
+    if (!client || !props.open && !visited) return null;
+    return /*#__PURE__*/ jsx(Suspense, {
+        fallback: null,
+        children: /*#__PURE__*/ jsx(Viewer, {
+            ...props
+        })
+    });
+}
+const GroupContext = /*#__PURE__*/ createContext(null);
+function ImagePreviewGroup({ children, items, open: controlled, defaultOpen = false, onOpenChange, index: controlledIndex, defaultIndex = 0, onIndexChange, thumbnails = true, downloadable = false }) {
+    const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);
+    const [index, setIndex] = useControllable(controlledIndex, defaultIndex, onIndexChange);
+    const [registered, setRegistered] = useState([]);
+    const register = useMemo(()=>(id, item)=>setRegistered((previous)=>{
+                const position = previous.findIndex((entry)=>entry.id === id);
+                if (!item) return previous.filter((entry)=>entry.id !== id);
+                if (position < 0) return [
+                    ...previous,
+                    {
+                        id,
+                        item
+                    }
+                ];
+                return previous.map((entry)=>entry.id === id ? {
+                        id,
+                        item
+                    } : entry);
+            }), []);
+    const context = useMemo(()=>({
+            register,
+            show (id) {
+                const position = registered.findIndex((entry)=>entry.id === id);
+                if (position >= 0) {
+                    setIndex(position);
+                    setOpen(true);
+                }
+            }
+        }), [
+        registered,
+        setIndex,
+        setOpen,
+        register
+    ]);
+    return /*#__PURE__*/ jsxs(GroupContext.Provider, {
+        value: context,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ImagePreview, {
+                items: items ?? registered.map((entry)=>entry.item),
+                open: open,
+                index: index,
+                onClose: ()=>setOpen(false),
+                onIndexChange: setIndex,
+                thumbnails: thumbnails,
+                downloadable: downloadable
+            })
+        ]
+    });
+}
+const image_Image = /*#__PURE__*/ forwardRef(function({ src, alt = '', preview = true, previewSrc, fallback, fit = 'cover', className, style, width, height, onLoad, onError, ...props }, ref) {
+    const t = useText();
+    const group = useContext(GroupContext);
+    const id = useId();
+    const native = useRef(null);
+    const mergedRef = useMergedRef(native, ref);
+    const [state, setState] = useState('loading');
+    const [open, setOpen] = useState(false);
+    useEffect(()=>{
+        const node = native.current;
+        setState(node?.complete ? node.naturalWidth > 0 ? 'ready' : 'error' : 'loading');
+    }, [
+        src
+    ]);
+    const register = group?.register;
+    useEffect(()=>{
+        register?.(id, preview && src ? {
+            src: previewSrc ?? src,
+            alt
+        } : null);
+    }, [
+        id,
+        src,
+        previewSrc,
+        alt,
+        preview,
+        register
+    ]);
+    useEffect(()=>()=>register?.(id, null), [
+        id,
+        register
+    ]);
+    const image = /*#__PURE__*/ jsx("img", {
+        ...props,
+        ref: mergedRef,
+        src: src,
+        alt: alt,
+        width: width,
+        height: height,
+        loading: props.loading ?? 'lazy',
+        style: {
+            objectFit: fit
+        },
+        onLoad: (event)=>{
+            setState('ready');
+            onLoad?.(event);
+        },
+        onError: (event)=>{
+            setState('error');
+            onError?.(event);
+        }
+    });
+    return /*#__PURE__*/ jsxs("span", {
+        className: classes('leaf-image', className),
+        style: {
+            width,
+            height,
+            ...style
+        },
+        "data-state": state,
+        children: [
+            preview && src ? /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                className: "leaf-image__trigger",
+                "aria-label": `${t('预览图片', 'Preview image')}${alt ? `: ${alt}` : ''}`,
+                onClick: (event)=>{
+                    if (!event.defaultPrevented && 'error' !== state) if (group) group.show(id);
+                    else setOpen(true);
+                },
+                children: [
+                    image,
+                    /*#__PURE__*/ jsx("span", {
+                        className: "leaf-image__zoom",
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx(Scan, {
+                            size: 20
+                        })
+                    })
+                ]
+            }) : image,
+            'loading' === state && /*#__PURE__*/ jsx("span", {
+                className: "leaf-image__placeholder",
+                children: /*#__PURE__*/ jsx(Loading, {
+                    size: "sm"
+                })
+            }),
+            'error' === state && /*#__PURE__*/ jsx("span", {
+                className: "leaf-image__placeholder",
+                role: "img",
+                "aria-label": alt || t('图片加载失败', 'Image unavailable'),
+                children: fallback ?? /*#__PURE__*/ jsx(ImageOff, {
+                    size: 24,
+                    "aria-hidden": "true"
+                })
+            }),
+            !group && /*#__PURE__*/ jsx(ImagePreview, {
+                items: src ? [
+                    {
+                        src: previewSrc ?? src,
+                        alt
+                    }
+                ] : [],
+                open: open,
+                onClose: ()=>setOpen(false)
+            })
+        ]
+    });
+});
+export { ImagePreview, ImagePreviewGroup, image_Image as Image };
+
+//# sourceMappingURL=image.js.map

package/dist/esm/browser/modules/image/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/image.js","sources":["../../../../../src/image/image.tsx"],"sourcesContent":["import { ImageOff, Scan } from 'lucide-react';\nimport {\n  createContext,\n  forwardRef,\n  type ImgHTMLAttributes,\n  lazy,\n  type ReactNode,\n  Suspense,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Loading } from '../loading';\nimport { classes } from '../shared/classes';\nimport { useMergedRef } from '../shared/field';\nimport { useClient } from '../shared/use-client';\nimport { useControllable } from '../shared/use-controllable';\nimport { useText } from '../shared/use-text';\n\nexport interface ImagePreviewItem {\n  src: string;\n  thumbnailSrc?: string;\n  alt?: string;\n  width?: number;\n  height?: number;\n  download?: string | boolean;\n  downloadName?: string;\n}\nexport interface ImagePreviewProps {\n  items: readonly ImagePreviewItem[];\n  open: boolean;\n  index?: number;\n  onClose: () => void;\n  onIndexChange?: (index: number) => void;\n  thumbnails?: boolean;\n  downloadable?: boolean;\n}\nconst Viewer = lazy(() => import('./viewer').then((module) => ({ default: module.ImageViewer })));\nexport function ImagePreview(props: ImagePreviewProps) {\n  const client = useClient();\n  const [visited, setVisited] = useState(props.open);\n  useEffect(() => {\n    if (props.open) setVisited(true);\n  }, [props.open]);\n  if (!client || (!props.open && !visited)) return null;\n  return (\n    <Suspense fallback={null}>\n      <Viewer {...props} />\n    </Suspense>\n  );\n}\ninterface GroupContextValue {\n  register: (id: string, item: ImagePreviewItem | null) => void;\n  show: (id: string) => void;\n}\nconst GroupContext = createContext<GroupContextValue | null>(null);\nexport interface ImagePreviewGroupProps {\n  children?: ReactNode;\n  items?: readonly ImagePreviewItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  thumbnails?: boolean;\n  downloadable?: boolean;\n}\nexport function ImagePreviewGroup({\n  children,\n  items,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  index: controlledIndex,\n  defaultIndex = 0,\n  onIndexChange,\n  thumbnails = true,\n  downloadable = false,\n}: ImagePreviewGroupProps) {\n  const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);\n  const [index, setIndex] = useControllable(controlledIndex, defaultIndex, onIndexChange);\n  const [registered, setRegistered] = useState<{ id: string; item: ImagePreviewItem }[]>([]);\n  // Registration must not depend on the list or opening a viewer would reorder images.\n  const register = useMemo(\n    () => (id: string, item: ImagePreviewItem | null) =>\n      setRegistered((previous) => {\n        const position = previous.findIndex((entry) => entry.id === id);\n        if (!item) return previous.filter((entry) => entry.id !== id);\n        if (position < 0) return [...previous, { id, item }];\n        return previous.map((entry) => (entry.id === id ? { id, item } : entry));\n      }),\n    [],\n  );\n  const context = useMemo<GroupContextValue>(\n    () => ({\n      register,\n      show(id) {\n        const position = registered.findIndex((entry) => entry.id === id);\n        if (position >= 0) {\n          setIndex(position);\n          setOpen(true);\n        }\n      },\n    }),\n    [registered, setIndex, setOpen, register],\n  );\n  return (\n    <GroupContext.Provider value={context}>\n      {children}\n      <ImagePreview\n        items={items ?? registered.map((entry) => entry.item)}\n        open={open}\n        index={index}\n        onClose={() => setOpen(false)}\n        onIndexChange={setIndex}\n        thumbnails={thumbnails}\n        downloadable={downloadable}\n      />\n    </GroupContext.Provider>\n  );\n}\nexport interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {\n  preview?: boolean;\n  previewSrc?: string;\n  fallback?: ReactNode;\n  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n}\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    src,\n    alt = '',\n    preview = true,\n    previewSrc,\n    fallback,\n    fit = 'cover',\n    className,\n    style,\n    width,\n    height,\n    onLoad,\n    onError,\n    ...props\n  },\n  ref,\n) {\n  const t = useText();\n  const group = useContext(GroupContext);\n  const id = useId();\n  const native = useRef<HTMLImageElement>(null);\n  const mergedRef = useMergedRef(native, ref);\n  const [state, setState] = useState<'loading' | 'ready' | 'error'>('loading');\n  const [open, setOpen] = useState(false);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: A changed source begins a new image loading cycle.\n  useEffect(() => {\n    const node = native.current;\n    setState(node?.complete ? (node.naturalWidth > 0 ? 'ready' : 'error') : 'loading');\n  }, [src]);\n  const register = group?.register;\n  useEffect(() => {\n    register?.(id, preview && src ? { src: previewSrc ?? src, alt } : null);\n  }, [id, src, previewSrc, alt, preview, register]);\n  useEffect(() => () => register?.(id, null), [id, register]);\n  const image = (\n    <img\n      {...props}\n      ref={mergedRef}\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      loading={props.loading ?? 'lazy'}\n      style={{ objectFit: fit }}\n      onLoad={(event) => {\n        setState('ready');\n        onLoad?.(event);\n      }}\n      onError={(event) => {\n        setState('error');\n        onError?.(event);\n      }}\n    />\n  );\n  return (\n    <span\n      className={classes('leaf-image', className)}\n      style={{ width, height, ...style }}\n      data-state={state}\n    >\n      {preview && src ? (\n        <button\n          type=\"button\"\n          className=\"leaf-image__trigger\"\n          aria-label={`${t('预览图片', 'Preview image')}${alt ? `: ${alt}` : ''}`}\n          onClick={(event) => {\n            if (!event.defaultPrevented && state !== 'error') {\n              if (group) group.show(id);\n              else setOpen(true);\n            }\n          }}\n        >\n          {image}\n          <span className=\"leaf-image__zoom\" aria-hidden=\"true\">\n            <Scan size={20} />\n          </span>\n        </button>\n      ) : (\n        image\n      )}\n      {state === 'loading' && (\n        <span className=\"leaf-image__placeholder\">\n          <Loading size=\"sm\" />\n        </span>\n      )}\n      {state === 'error' && (\n        <span\n          className=\"leaf-image__placeholder\"\n          role=\"img\"\n          aria-label={alt || t('图片加载失败', 'Image unavailable')}\n        >\n          {fallback ?? <ImageOff size={24} aria-hidden=\"true\" />}\n        </span>\n      )}\n      {!group && (\n        <ImagePreview\n          items={src ? [{ src: previewSrc ?? src, alt }] : []}\n          open={open}\n          onClose={() => setOpen(false)}\n        />\n      )}\n    </span>\n  );\n});\n"],"names":["Viewer","lazy","module","ImagePreview","props","client","useClient","visited","setVisited","useState","useEffect","Suspense","GroupContext","createContext","ImagePreviewGroup","children","items","controlled","defaultOpen","onOpenChange","controlledIndex","defaultIndex","onIndexChange","thumbnails","downloadable","open","setOpen","useControllable","index","setIndex","registered","setRegistered","register","useMemo","id","item","previous","position","entry","context","Image","forwardRef","src","alt","preview","previewSrc","fallback","fit","className","style","width","height","onLoad","onError","ref","t","useText","group","useContext","useId","native","useRef","mergedRef","useMergedRef","state","setState","node","image","event","classes","Scan","Loading","ImageOff"],"mappings":"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"}

package/dist/esm/browser/modules/image/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Image, ImagePreview, ImagePreviewGroup } from "./image.js";

package/dist/esm/browser/modules/image/viewer.js

@@ -0,0 +1,411 @@
+"use client";
+import '../../../styles/components/image.css';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, Download, ImageOff, Maximize2, Minimize2, PanelBottom, RotateCcw, X, ZoomIn, ZoomOut } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import yet_another_react_lightbox, { useController, useLightboxState, useNavigationState } from "yet-another-react-lightbox";
+import plugins_fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
+import plugins_zoom from "yet-another-react-lightbox/plugins/zoom";
+import { Loading } from "../loading/index.js";
+import { motionDuration, useMotionEnabled } from "../shared/motion.js";
+import { ScopedPortal } from "../shared/scoped-portal.js";
+import { useText } from "../shared/use-text.js";
+function ImageViewer(props) {
+    return /*#__PURE__*/ jsx(ScopedPortal, {
+        children: /*#__PURE__*/ jsx(Viewer, {
+            ...props
+        })
+    });
+}
+function Control({ label, children, active, disabled, onClick, className = '' }) {
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: `leaf-image-viewer__control ${className}`,
+        "aria-label": label,
+        title: label,
+        "aria-pressed": active,
+        disabled: disabled,
+        onClick: onClick,
+        children: children
+    });
+}
+function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreenControl }) {
+    const t = useText();
+    const motion = useMotionEnabled();
+    const { currentIndex } = useLightboxState();
+    const { prev, next, close } = useController();
+    const { prevDisabled, nextDisabled } = useNavigationState();
+    const strip = useRef(null);
+    const [showThumbs, setShowThumbs] = useState(thumbnails);
+    const [failedDownload, setFailedDownload] = useState(false);
+    const [downloading, setDownloading] = useState(false);
+    const item = items[currentIndex];
+    const hasThumbs = thumbnails && items.length > 1;
+    const zoom = zoomControl?.zoom ?? 1;
+    const fullscreen = fullscreenControl?.fullscreen ?? false;
+    const downloadUrl = 'string' == typeof item?.download ? item.download : item?.src;
+    useEffect(()=>setShowThumbs(thumbnails), [
+        thumbnails
+    ]);
+    useEffect(()=>{
+        setFailedDownload(false);
+        if (!showThumbs) return;
+        const root = strip.current;
+        const selected = root?.querySelector(`[data-index="${currentIndex}"]`);
+        if (root && selected) root.scrollTo({
+            left: selected.offsetLeft - root.offsetLeft - (root.clientWidth - selected.clientWidth) / 2,
+            behavior: motion ? 'smooth' : 'auto'
+        });
+    }, [
+        currentIndex,
+        showThumbs,
+        motion
+    ]);
+    const choose = (target)=>{
+        const difference = target - currentIndex;
+        if (difference > 0) next({
+            count: difference
+        });
+        else if (difference < 0) prev({
+            count: -difference
+        });
+    };
+    const download = async ()=>{
+        if (!item || downloading) return;
+        setDownloading(true);
+        setFailedDownload(false);
+        try {
+            const address = 'string' == typeof item.download ? item.download : item.src;
+            const response = await fetch(address);
+            if (!response.ok) throw new Error('Download failed');
+            const url = URL.createObjectURL(await response.blob());
+            const anchor = document.createElement('a');
+            anchor.href = url;
+            anchor.download = item.downloadName || address.split(/[?#]/)[0]?.split('/').pop() || 'image';
+            anchor.click();
+            setTimeout(()=>URL.revokeObjectURL(url), 1000);
+        } catch  {
+            setFailedDownload(true);
+        } finally{
+            setDownloading(false);
+        }
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "leaf-image-viewer__chrome",
+        "data-thumbnails": hasThumbs && showThumbs || void 0,
+        children: [
+            /*#__PURE__*/ jsxs("header", {
+                className: "leaf-image-viewer__header",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-image-viewer__title",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                children: item?.alt || t('图片预览', 'Image preview')
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                className: "leaf-image-viewer__count",
+                                "aria-live": "polite",
+                                children: [
+                                    currentIndex + 1,
+                                    " / ",
+                                    items.length
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-image-viewer__header-actions",
+                        children: [
+                            downloadable && item?.download !== false && /*#__PURE__*/ jsx(Control, {
+                                label: t('下载图片', 'Download image'),
+                                onClick: ()=>void download(),
+                                disabled: downloading,
+                                children: downloading ? /*#__PURE__*/ jsx(Loading, {
+                                    size: "sm"
+                                }) : /*#__PURE__*/ jsx(Download, {
+                                    size: 19
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Control, {
+                                label: fullscreen ? t('退出全屏', 'Exit fullscreen') : t('进入全屏', 'Enter fullscreen'),
+                                disabled: !fullscreenControl || fullscreenControl.disabled,
+                                onClick: ()=>fullscreen ? fullscreenControl?.exit() : fullscreenControl?.enter(),
+                                children: fullscreen ? /*#__PURE__*/ jsx(Minimize2, {
+                                    size: 19
+                                }) : /*#__PURE__*/ jsx(Maximize2, {
+                                    size: 19
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Control, {
+                                label: t('关闭预览', 'Close preview'),
+                                onClick: close,
+                                children: /*#__PURE__*/ jsx(X, {
+                                    size: 22
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            items.length > 1 && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Control, {
+                        className: "leaf-image-viewer__previous",
+                        label: t('上一张', 'Previous image'),
+                        disabled: prevDisabled,
+                        onClick: ()=>prev(),
+                        children: /*#__PURE__*/ jsx(ChevronLeft, {
+                            size: 26
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Control, {
+                        className: "leaf-image-viewer__next",
+                        label: t('下一张', 'Next image'),
+                        disabled: nextDisabled,
+                        onClick: ()=>next(),
+                        children: /*#__PURE__*/ jsx(ChevronRight, {
+                            size: 26
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("footer", {
+                className: "leaf-image-viewer__footer",
+                children: [
+                    failedDownload && /*#__PURE__*/ jsxs("p", {
+                        role: "alert",
+                        className: "leaf-image-viewer__error",
+                        children: [
+                            t('下载失败，可在新窗口打开原图保存', 'Download failed. Open the original image to save it.'),
+                            ' ',
+                            /*#__PURE__*/ jsx("a", {
+                                href: downloadUrl,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                children: t('打开原图', 'Open original')
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-image-viewer__tools",
+                        children: [
+                            /*#__PURE__*/ jsx(Control, {
+                                label: t('缩小', 'Zoom out'),
+                                disabled: !zoomControl || zoomControl.disabled || zoom <= 1,
+                                onClick: ()=>zoomControl?.zoomOut(),
+                                children: /*#__PURE__*/ jsx(ZoomOut, {
+                                    size: 18
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs("button", {
+                                type: "button",
+                                className: "leaf-image-viewer__zoom-level",
+                                onClick: ()=>zoomControl?.changeZoom(1),
+                                title: t('重置缩放', 'Reset zoom'),
+                                children: [
+                                    Math.round(100 * zoom),
+                                    "%"
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Control, {
+                                label: t('放大', 'Zoom in'),
+                                disabled: !zoomControl || zoomControl.disabled || zoom >= zoomControl.maxZoom,
+                                onClick: ()=>zoomControl?.zoomIn(),
+                                children: /*#__PURE__*/ jsx(ZoomIn, {
+                                    size: 18
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Control, {
+                                label: t('重置缩放', 'Reset zoom'),
+                                disabled: zoom <= 1,
+                                onClick: ()=>zoomControl?.changeZoom(1),
+                                children: /*#__PURE__*/ jsx(RotateCcw, {
+                                    size: 17
+                                })
+                            }),
+                            hasThumbs && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "leaf-image-viewer__tool-separator"
+                                    }),
+                                    /*#__PURE__*/ jsx(Control, {
+                                        label: t('显示缩略图', 'Show thumbnails'),
+                                        active: showThumbs,
+                                        onClick: ()=>setShowThumbs((value)=>!value),
+                                        children: /*#__PURE__*/ jsx(PanelBottom, {
+                                            size: 18
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    hasThumbs && showThumbs && /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-image-viewer__gallery",
+                        children: [
+                            /*#__PURE__*/ jsx(Control, {
+                                label: t('向前滚动缩略图', 'Scroll thumbnails backward'),
+                                onClick: ()=>strip.current?.scrollBy({
+                                        left: -(0.7 * strip.current.clientWidth),
+                                        behavior: motion ? 'smooth' : 'auto'
+                                    }),
+                                children: /*#__PURE__*/ jsx(ChevronLeft, {
+                                    size: 18
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("fieldset", {
+                                className: "leaf-image-viewer__thumbnails",
+                                ref: strip,
+                                "aria-label": t('图片列表', 'Image list'),
+                                children: items.map((image, target)=>/*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        className: "leaf-image-viewer__thumbnail",
+                                        "data-index": target,
+                                        "aria-current": currentIndex === target || void 0,
+                                        "aria-label": `${t('查看第', 'View image')} ${target + 1}${t('张图片', '')}${image.alt ? `: ${image.alt}` : ''}`,
+                                        title: image.alt || String(target + 1),
+                                        tabIndex: currentIndex === target ? 0 : -1,
+                                        onClick: ()=>choose(target),
+                                        onKeyDown: (event)=>{
+                                            if (![
+                                                'ArrowLeft',
+                                                'ArrowRight',
+                                                'Home',
+                                                'End'
+                                            ].includes(event.key)) return;
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            const position = 'Home' === event.key ? 0 : 'End' === event.key ? items.length - 1 : Math.max(0, Math.min(items.length - 1, target + ('ArrowRight' === event.key ? 1 : -1)));
+                                            choose(position);
+                                            strip.current?.querySelector(`[data-index="${position}"]`)?.focus();
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ jsx("img", {
+                                                src: image.thumbnailSrc ?? image.src,
+                                                alt: "",
+                                                loading: "lazy",
+                                                draggable: false
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                children: target + 1
+                                            })
+                                        ]
+                                    }, `${image.src}-${target}`))
+                            }),
+                            /*#__PURE__*/ jsx(Control, {
+                                label: t('向后滚动缩略图', 'Scroll thumbnails forward'),
+                                onClick: ()=>strip.current?.scrollBy({
+                                        left: 0.7 * strip.current.clientWidth,
+                                        behavior: motion ? 'smooth' : 'auto'
+                                    }),
+                                children: /*#__PURE__*/ jsx(ChevronRight, {
+                                    size: 18
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function Viewer({ items, open, index = 0, onClose, onIndexChange, thumbnails = true, downloadable = false }) {
+    const [root, setRoot] = useState(null);
+    const [zoomControl, setZoomControl] = useState(null);
+    const [fullscreenControl, setFullscreenControl] = useState(null);
+    const [slides, setSlides] = useState(()=>items.map((item)=>({
+                ...item
+            })));
+    if (items.length !== slides.length || items.some((item, position)=>{
+        const slide = slides[position];
+        return !slide || item.src !== slide.src || item.alt !== slide.alt || item.width !== slide.width || item.height !== slide.height || item.thumbnailSrc !== slide.thumbnailSrc || item.download !== slide.download || item.downloadName !== slide.downloadName;
+    })) setSlides(items.map((item)=>({
+            ...item
+        })));
+    const t = useText();
+    const motion = useMotionEnabled();
+    const duration = root && motion ? motionDuration(root) : 0;
+    return /*#__PURE__*/ jsx("div", {
+        ref: setRoot,
+        className: "leaf-image-viewer",
+        children: root && /*#__PURE__*/ jsx(yet_another_react_lightbox, {
+            open: open && items.length > 0,
+            close: onClose,
+            slides: slides,
+            index: Math.max(0, Math.min(index, items.length - 1)),
+            portal: {
+                root
+            },
+            plugins: [
+                plugins_zoom,
+                plugins_fullscreen
+            ],
+            className: "leaf-image-viewer__lightbox",
+            carousel: {
+                finite: true,
+                padding: 0,
+                spacing: 24
+            },
+            animation: {
+                fade: 1.2 * duration,
+                swipe: 1.6 * duration,
+                navigation: 1.6 * duration,
+                zoom: duration
+            },
+            zoom: {
+                ref: setZoomControl,
+                maxZoomPixelRatio: 3,
+                scrollToZoom: true
+            },
+            fullscreen: {
+                ref: setFullscreenControl
+            },
+            controller: {
+                closeOnBackdropClick: true
+            },
+            toolbar: {
+                buttons: []
+            },
+            render: {
+                buttonClose: ()=>null,
+                buttonPrev: ()=>null,
+                buttonNext: ()=>null,
+                buttonZoom: ()=>null,
+                buttonFullscreen: ()=>null,
+                iconLoading: ()=>/*#__PURE__*/ jsx(Loading, {}),
+                iconError: ()=>/*#__PURE__*/ jsx(ImageOff, {
+                        size: 32
+                    }),
+                controls: ()=>/*#__PURE__*/ jsx(ViewerChrome, {
+                        items: items,
+                        thumbnails: thumbnails,
+                        downloadable: downloadable,
+                        zoomControl: zoomControl,
+                        fullscreenControl: fullscreenControl
+                    })
+            },
+            labels: {
+                Lightbox: t('图片预览', 'Image preview'),
+                'Photo gallery': t('图片列表', 'Image list'),
+                Slide: t('图片', 'Image'),
+                '{index} of {total}': t('第 {index} 张，共 {total} 张', '{index} of {total}'),
+                Close: t('关闭预览', 'Close preview')
+            },
+            on: {
+                view: ({ index: next })=>{
+                    if (next !== index) onIndexChange?.(next);
+                }
+            },
+            styles: {
+                root: {
+                    '--yarl__color_backdrop': 'rgba(0,0,0,.92)',
+                    zIndex: 'var(--leaf-z-index-modal)'
+                }
+            }
+        })
+    });
+}
+export { ImageViewer };
+
+//# sourceMappingURL=viewer.js.map