@djangocfg/ui-tools 2.1.389 → 2.1.393

package/dist/chunk-5I5QNGUG.cjs

@@ -1,611 +0,0 @@
-'use strict';
-
-var chunkYW5IVWHQ_cjs = require('./chunk-YW5IVWHQ.cjs');
-var chunkOLISEQHS_cjs = require('./chunk-OLISEQHS.cjs');
-var react = require('react');
-var lucideReact = require('lucide-react');
-var reactZoomPanPinch = require('react-zoom-pan-pinch');
-var uiCore = require('@djangocfg/ui-core');
-var i18n = require('@djangocfg/i18n');
-var hooks = require('@djangocfg/ui-core/hooks');
-var components = require('@djangocfg/ui-core/components');
-var lib = require('@djangocfg/ui-core/lib');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/tools/ImageViewer/utils/constants.ts
-var MAX_IMAGE_SIZE = 50 * 1024 * 1024;
-var WARNING_IMAGE_SIZE = 10 * 1024 * 1024;
-var PROGRESSIVE_LOADING_THRESHOLD = 500 * 1024;
-var LQIP_SIZE = 32;
-var LQIP_QUALITY = 0.5;
-var ZOOM_PRESETS = [
-  { label: "Fit", value: "fit" },
-  { label: "25%", value: 0.25 },
-  { label: "50%", value: 0.5 },
-  { label: "100%", value: 1 },
-  { label: "200%", value: 2 },
-  { label: "400%", value: 4 }
-];
-var DEFAULT_TRANSFORM = {
-  rotation: 0,
-  flipH: false,
-  flipV: false
-};
-
-// src/tools/ImageViewer/utils/lqip.ts
-async function createLQIP(imageSrc) {
-  try {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    await new Promise((resolve, reject) => {
-      img.onload = () => resolve();
-      img.onerror = () => reject(new Error("Failed to load image for LQIP"));
-      img.src = imageSrc;
-    });
-    const aspect = img.naturalWidth / img.naturalHeight;
-    const width = aspect >= 1 ? LQIP_SIZE : Math.round(LQIP_SIZE * aspect);
-    const height = aspect >= 1 ? Math.round(LQIP_SIZE / aspect) : LQIP_SIZE;
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return null;
-    ctx.drawImage(img, 0, 0, width, height);
-    return canvas.toDataURL("image/jpeg", LQIP_QUALITY);
-  } catch {
-    return null;
-  }
-}
-chunkOLISEQHS_cjs.__name(createLQIP, "createLQIP");
-var imageDebug = lib.createMediaLogger("ImageViewer");
-function ImageToolbar({
-  scale,
-  transform,
-  onRotate,
-  onFlipH,
-  onFlipV,
-  onZoomPreset,
-  onExpand
-}) {
-  const t = i18n.useAppT();
-  const { zoomIn, zoomOut, resetTransform } = reactZoomPanPinch.useControls();
-  const labels = react.useMemo(() => ({
-    zoomIn: t("tools.image.zoomIn"),
-    zoomOut: t("tools.image.zoomOut"),
-    fitToView: t("tools.image.fitToView"),
-    flipHorizontal: t("tools.image.flipHorizontal"),
-    flipVertical: t("tools.image.flipVertical"),
-    rotate: t("tools.image.rotate"),
-    fullscreen: t("tools.image.fullscreen")
-  }), [t]);
-  const zoomLabel = react.useMemo(() => {
-    const percent = Math.round(scale * 100);
-    return `${percent}%`;
-  }, [scale]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-background/90 backdrop-blur-sm border rounded-lg p-1 shadow-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components.Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: "h-7 w-7",
-        onClick: () => zoomOut(),
-        title: labels.zoomOut,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { className: "h-3.5 w-3.5" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(components.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(components.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "sm", className: "h-7 px-2 min-w-[52px] font-mono text-xs", children: zoomLabel }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(components.DropdownMenuContent, { align: "center", className: "min-w-[80px]", children: ZOOM_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
-        components.DropdownMenuItem,
-        {
-          onClick: () => onZoomPreset(preset.value),
-          className: "text-xs justify-center",
-          children: preset.label
-        },
-        preset.label
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components.Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: "h-7 w-7",
-        onClick: () => zoomIn(),
-        title: labels.zoomIn,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { className: "h-3.5 w-3.5" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components.Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: "h-7 w-7",
-        onClick: () => resetTransform(),
-        title: labels.fitToView,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3.5 w-3.5" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components.Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: lib.cn("h-7 w-7", transform.flipH && "bg-accent"),
-        onClick: onFlipH,
-        title: labels.flipHorizontal,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FlipHorizontal, { className: "h-3.5 w-3.5" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components.Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: lib.cn("h-7 w-7", transform.flipV && "bg-accent"),
-        onClick: onFlipV,
-        title: labels.flipVertical,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FlipVertical, { className: "h-3.5 w-3.5" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components.Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        className: "h-7 w-7",
-        onClick: onRotate,
-        title: labels.rotate,
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, { className: "h-3.5 w-3.5" })
-      }
-    ),
-    transform.rotation !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground font-mono pl-1", children: [
-      transform.rotation,
-      "\xB0"
-    ] }),
-    onExpand && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        components.Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "h-7 w-7",
-          onClick: onExpand,
-          title: labels.fullscreen,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Expand, { className: "h-3.5 w-3.5" })
-        }
-      )
-    ] })
-  ] });
-}
-chunkOLISEQHS_cjs.__name(ImageToolbar, "ImageToolbar");
-function ImageInfo({ src }) {
-  const { getDimensions, cacheDimensions } = chunkYW5IVWHQ_cjs.useImageCache();
-  const [dimensions, setDimensions] = react.useState(null);
-  react.useEffect(() => {
-    const cached = getDimensions(src);
-    if (cached) {
-      setDimensions({ w: cached.width, h: cached.height });
-      return;
-    }
-    const img = new Image();
-    img.onload = () => {
-      const dims = { w: img.naturalWidth, h: img.naturalHeight };
-      setDimensions(dims);
-      cacheDimensions(src, { width: dims.w, height: dims.h });
-    };
-    img.src = src;
-  }, [src, getDimensions, cacheDimensions]);
-  if (!dimensions) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-3 right-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono", children: [
-    dimensions.w,
-    " \xD7 ",
-    dimensions.h
-  ] });
-}
-chunkOLISEQHS_cjs.__name(ImageInfo, "ImageInfo");
-function useImageTransform(options = {}) {
-  const { resetKey } = options;
-  const [transform, setTransform] = react.useState(DEFAULT_TRANSFORM);
-  react.useEffect(() => {
-    setTransform(DEFAULT_TRANSFORM);
-  }, [resetKey]);
-  const rotate = react.useCallback(() => {
-    setTransform((prev) => ({
-      ...prev,
-      rotation: (prev.rotation + 90) % 360
-    }));
-  }, []);
-  const flipH = react.useCallback(() => {
-    setTransform((prev) => ({
-      ...prev,
-      flipH: !prev.flipH
-    }));
-  }, []);
-  const flipV = react.useCallback(() => {
-    setTransform((prev) => ({
-      ...prev,
-      flipV: !prev.flipV
-    }));
-  }, []);
-  const reset = react.useCallback(() => {
-    setTransform(DEFAULT_TRANSFORM);
-  }, []);
-  const transformStyle = react.useMemo(() => {
-    const transforms = [];
-    if (transform.rotation !== 0) {
-      transforms.push(`rotate(${transform.rotation}deg)`);
-    }
-    if (transform.flipH) {
-      transforms.push("scaleX(-1)");
-    }
-    if (transform.flipV) {
-      transforms.push("scaleY(-1)");
-    }
-    return transforms.join(" ") || "none";
-  }, [transform]);
-  return {
-    transform,
-    rotate,
-    flipH,
-    flipV,
-    reset,
-    transformStyle
-  };
-}
-chunkOLISEQHS_cjs.__name(useImageTransform, "useImageTransform");
-function useImageLoading(options) {
-  const { content, mimeType, src: directSrc } = options;
-  const getOrCreateBlobUrl = chunkYW5IVWHQ_cjs.useMediaCacheStore.getState().getOrCreateBlobUrl;
-  const releaseBlobUrl = chunkYW5IVWHQ_cjs.useMediaCacheStore.getState().releaseBlobUrl;
-  const [src, setSrc] = react.useState(null);
-  const [lqip, setLqip] = react.useState(null);
-  const [isFullyLoaded, setIsFullyLoaded] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const contentKeyRef = react.useRef(null);
-  const isMountedRef = react.useRef(true);
-  const size = content ? typeof content === "string" ? content.length : content.byteLength : 0;
-  const hasContent = directSrc ? true : size > 0;
-  const useProgressiveLoading = directSrc ? false : size > PROGRESSIVE_LOADING_THRESHOLD;
-  react.useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      if (contentKeyRef.current) {
-        chunkYW5IVWHQ_cjs.useMediaCacheStore.getState().releaseBlobUrl(contentKeyRef.current);
-        contentKeyRef.current = null;
-      }
-    };
-  }, []);
-  react.useEffect(() => {
-    setError(null);
-    if (directSrc) {
-      imageDebug.load(directSrc, "url");
-      setSrc(directSrc);
-      setIsFullyLoaded(true);
-      return;
-    }
-    if (!hasContent) {
-      setSrc(null);
-      return;
-    }
-    if (size > MAX_IMAGE_SIZE) {
-      const sizeMB = (size / 1024 / 1024).toFixed(1);
-      const errorMsg = `Image too large: ${sizeMB}MB (maximum: 50MB)`;
-      imageDebug.error(errorMsg, { size, sizeMB, maxSize: MAX_IMAGE_SIZE });
-      setError(errorMsg);
-      setSrc(null);
-      return;
-    }
-    if (size > WARNING_IMAGE_SIZE) {
-      const sizeMB = (size / 1024 / 1024).toFixed(1);
-      imageDebug.warn(`Large image: ${sizeMB}MB - may impact performance`);
-    }
-    if (typeof content === "string") {
-      if (content.startsWith("data:")) {
-        imageDebug.load(content.slice(0, 50) + "...", "data-url");
-        setSrc(content);
-        return;
-      }
-      const encoder = new TextEncoder();
-      const buffer = encoder.encode(content).buffer;
-      const contentKey2 = chunkYW5IVWHQ_cjs.generateContentKey(buffer);
-      if (contentKeyRef.current && contentKeyRef.current !== contentKey2) {
-        releaseBlobUrl(contentKeyRef.current);
-      }
-      contentKeyRef.current = contentKey2;
-      const url2 = getOrCreateBlobUrl(contentKey2, buffer, mimeType || "image/png");
-      imageDebug.load(url2, "blob");
-      imageDebug.state("loaded", { size, mimeType, contentKey: contentKey2 });
-      setSrc(url2);
-      return;
-    }
-    const contentKey = chunkYW5IVWHQ_cjs.generateContentKey(content);
-    if (contentKeyRef.current && contentKeyRef.current !== contentKey) {
-      releaseBlobUrl(contentKeyRef.current);
-    }
-    contentKeyRef.current = contentKey;
-    const url = getOrCreateBlobUrl(contentKey, content, mimeType || "image/png");
-    imageDebug.load(url, "blob");
-    imageDebug.state("loaded", { size, mimeType, contentKey });
-    setSrc(url);
-  }, [content, mimeType, hasContent, size, directSrc]);
-  react.useEffect(() => {
-    if (!src || !useProgressiveLoading) {
-      setLqip(null);
-      setIsFullyLoaded(true);
-      return;
-    }
-    setIsFullyLoaded(false);
-    imageDebug.state("progressive loading", { size });
-    createLQIP(src).then((placeholder) => {
-      if (placeholder) {
-        imageDebug.debug("LQIP created");
-        setLqip(placeholder);
-      }
-    });
-    const img = new Image();
-    img.onload = () => {
-      imageDebug.state("fully loaded");
-      setIsFullyLoaded(true);
-    };
-    img.onerror = () => {
-      imageDebug.error("Failed to load full image");
-    };
-    img.src = src;
-  }, [src, useProgressiveLoading, size]);
-  return {
-    src,
-    lqip,
-    isFullyLoaded,
-    useProgressiveLoading,
-    error,
-    contentKey: contentKeyRef.current,
-    size,
-    hasContent
-  };
-}
-chunkOLISEQHS_cjs.__name(useImageLoading, "useImageLoading");
-function ImageViewer({
-  images,
-  initialIndex = 0,
-  inDialog = false
-}) {
-  const t = i18n.useAppT();
-  const [currentIndex, setCurrentIndex] = react.useState(
-    () => Math.max(0, Math.min(initialIndex, images.length - 1))
-  );
-  react.useEffect(() => {
-    setCurrentIndex(Math.max(0, Math.min(initialIndex, images.length - 1)));
-  }, [initialIndex, images.length]);
-  const current = images[currentIndex];
-  const hasMultiple = images.length > 1;
-  const [scale, setScale] = react.useState(1);
-  const [dialogOpen, setDialogOpen] = react.useState(false);
-  const [loadError, setLoadError] = react.useState(false);
-  const containerRef = react.useRef(null);
-  const controlsRef = react.useRef(null);
-  const labels = react.useMemo(() => ({
-    noImage: t("tools.image.noImage"),
-    failedToLoad: t("tools.image.failedToLoad"),
-    loading: t("ui.form.loading")
-  }), [t]);
-  const {
-    src,
-    lqip,
-    isFullyLoaded,
-    useProgressiveLoading,
-    error,
-    hasContent
-  } = useImageLoading({
-    content: current?.content ?? "",
-    mimeType: current?.file.mimeType,
-    src: current?.src
-  });
-  react.useEffect(() => {
-    setLoadError(false);
-  }, [src]);
-  const { transform, rotate, flipH, flipV, transformStyle } = useImageTransform({
-    resetKey: current?.file.path ?? ""
-  });
-  const handleZoomPreset = react.useCallback((value) => {
-    if (!controlsRef.current) return;
-    if (value === "fit") controlsRef.current.resetTransform();
-    else controlsRef.current.setTransform(0, 0, value);
-  }, []);
-  const handleExpand = react.useCallback(() => setDialogOpen(true), []);
-  const prev = react.useCallback(
-    () => setCurrentIndex((i) => (i - 1 + images.length) % images.length),
-    [images.length]
-  );
-  const next = react.useCallback(
-    () => setCurrentIndex((i) => (i + 1) % images.length),
-    [images.length]
-  );
-  react.useEffect(() => {
-    const handleKeyDown = /* @__PURE__ */ chunkOLISEQHS_cjs.__name((e) => {
-      if (!containerRef.current?.contains(document.activeElement) && document.activeElement !== containerRef.current) return;
-      const controls = controlsRef.current;
-      if (!controls) return;
-      switch (e.key) {
-        case "+":
-        case "=":
-          e.preventDefault();
-          controls.zoomIn();
-          break;
-        case "-":
-          e.preventDefault();
-          controls.zoomOut();
-          break;
-        case "0":
-          e.preventDefault();
-          controls.resetTransform();
-          break;
-        case "r":
-          if (!e.metaKey && !e.ctrlKey) {
-            e.preventDefault();
-            rotate();
-          }
-          break;
-      }
-    }, "handleKeyDown");
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [rotate]);
-  hooks.useHotkey("ArrowLeft", prev, { enabled: hasMultiple, preventDefault: true });
-  hooks.useHotkey("ArrowRight", next, { enabled: hasMultiple, preventDefault: true });
-  if (!current) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 bg-muted/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageIcon, { className: "w-12 h-12 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: labels.noImage })
-    ] });
-  }
-  if (error || loadError) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-3 bg-muted/30 p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-12 h-12 text-destructive/70" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Alert, { variant: "destructive", className: "max-w-md", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiCore.AlertDescription, { children: error || labels.failedToLoad })
-      ] })
-    ] });
-  }
-  if (!hasContent) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 bg-muted/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageIcon, { className: "w-12 h-12 text-muted-foreground/50" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: labels.noImage })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      tabIndex: 0,
-      className: uiCore.cn(
-        "flex-1 h-full relative overflow-hidden outline-none",
-        "bg-[length:16px_16px]",
-        "[background-color:hsl(var(--muted)/0.2)]",
-        "[background-image:linear-gradient(45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(-45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,hsl(var(--muted)/0.4)_75%),linear-gradient(-45deg,transparent_75%,hsl(var(--muted)/0.4)_75%)]",
-        "[background-position:0_0,0_8px,8px_-8px,-8px_0px]"
-      ),
-      children: [
-        src && /* @__PURE__ */ jsxRuntime.jsx(ImageInfo, { src }),
-        useProgressiveLoading && !isFullyLoaded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-3 left-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-pulse" }),
-          labels.loading
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          reactZoomPanPinch.TransformWrapper,
-          {
-            initialScale: 1,
-            minScale: 0.1,
-            maxScale: 8,
-            centerOnInit: true,
-            centerZoomedOut: true,
-            onTransformed: (ref, state) => {
-              setScale(state.scale);
-              controlsRef.current = ref;
-            },
-            onInit: (ref) => {
-              controlsRef.current = ref;
-            },
-            wheel: { step: 0.1 },
-            doubleClick: { mode: "toggle", step: 2 },
-            panning: { velocityDisabled: false },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ImageToolbar,
-                {
-                  scale,
-                  transform,
-                  onRotate: rotate,
-                  onFlipH: flipH,
-                  onFlipV: flipV,
-                  onZoomPreset: handleZoomPreset,
-                  onExpand: !inDialog ? handleExpand : void 0
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactZoomPanPinch.TransformComponent,
-                {
-                  wrapperClass: "!w-full !h-full cursor-grab active:cursor-grabbing",
-                  contentClass: "!w-full !h-full flex items-center justify-center",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                    useProgressiveLoading && lqip && !isFullyLoaded && /* @__PURE__ */ jsxRuntime.jsx(
-                      "img",
-                      {
-                        src: lqip,
-                        alt: "",
-                        "aria-hidden": "true",
-                        className: "absolute inset-0 max-w-full max-h-full object-contain select-none",
-                        style: { transform: transformStyle, filter: "blur(20px)", transition: "opacity 0.3s ease-out", opacity: isFullyLoaded ? 0 : 1 },
-                        draggable: false
-                      }
-                    ),
-                    src && /* @__PURE__ */ jsxRuntime.jsx(
-                      "img",
-                      {
-                        src,
-                        alt: current.file.name,
-                        className: "max-w-full max-h-full object-contain select-none",
-                        style: {
-                          transform: transformStyle,
-                          transition: useProgressiveLoading ? "transform 0.15s ease-out, opacity 0.3s ease-out" : "transform 0.15s ease-out",
-                          opacity: useProgressiveLoading && !isFullyLoaded ? 0 : 1
-                        },
-                        draggable: false,
-                        crossOrigin: "anonymous",
-                        onError: () => setLoadError(true)
-                      }
-                    )
-                  ] })
-                }
-              )
-            ]
-          }
-        ),
-        hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: prev,
-              className: "absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-5 w-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: next,
-              className: "absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-5 w-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 z-10 bg-black/50 text-white text-xs px-2 py-0.5 rounded-full pointer-events-none", children: [
-            currentIndex + 1,
-            " / ",
-            images.length
-          ] })
-        ] }),
-        !inDialog && /* @__PURE__ */ jsxRuntime.jsx(uiCore.Dialog, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogContent, { className: "max-w-[95vw] max-h-[95vh] w-[95vw] h-[95vh] p-0 overflow-hidden [&>button]:hidden flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogTitle, { className: "sr-only", children: current.file.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-4 py-2 border-b shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: current.file.name }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(ImageViewer, { images, initialIndex: currentIndex, inDialog: true }) })
-        ] }) })
-      ]
-    }
-  );
-}
-chunkOLISEQHS_cjs.__name(ImageViewer, "ImageViewer");
-
-exports.ImageInfo = ImageInfo;
-exports.ImageToolbar = ImageToolbar;
-exports.ImageViewer = ImageViewer;
-//# sourceMappingURL=chunk-5I5QNGUG.cjs.map
-//# sourceMappingURL=chunk-5I5QNGUG.cjs.map