@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/widgets/ImageGallery.js

@@ -1,320 +1,386 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, useState, useEffect, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { useBreakpoint, resolveResponsiveValue } from "../layout/useBreakpoint.js";
+import { resolveResponsiveValue, useBreakpoint } from "../layout/useBreakpoint.js";
 import { Pagination } from "../navigation/Pagination.js";
-const ImageGallery = memo(function ImageGallery2({
-  images,
-  columns = [2, 3, 4],
-  pageSize = 12,
-  onDownload,
-  onDelete,
-  onClick,
-  lightbox = true,
-  thumbnailHeight = 140,
-  emptyMessage = "No images captured",
-  newCount: _newCount,
-  style
-}) {
-  const { tokens } = useTheme();
-  const { breakpoint } = useBreakpoint();
-  const [currentPage, setCurrentPage] = useState(0);
-  const [selectedImage, setSelectedImage] = useState(null);
-  const [hoveredId, setHoveredId] = useState(null);
-  const cols = Array.isArray(columns) ? resolveResponsiveValue(columns, breakpoint) : columns;
-  const totalPages = pageSize > 0 ? Math.ceil(images.length / pageSize) : 1;
-  const pageImages = pageSize > 0 ? images.slice(currentPage * pageSize, (currentPage + 1) * pageSize) : images;
-  useEffect(() => {
-    if (currentPage >= totalPages && totalPages > 0) {
-      setCurrentPage(totalPages - 1);
-    }
-  }, [images.length, totalPages, currentPage]);
-  useEffect(() => {
-    if (!selectedImage) return;
-    const handler = (e) => {
-      if (e.key === "Escape") setSelectedImage(null);
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [selectedImage]);
-  const handleImageClick = useCallback((img) => {
-    onClick == null ? void 0 : onClick(img);
-    if (lightbox) setSelectedImage(img);
-  }, [onClick, lightbox]);
-  const formatTime = (ts) => {
-    if (!ts) return "";
-    const d = new Date(ts);
-    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-  };
-  const ActionBtn = ({ icon, label, onClick: handler, color }) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      "aria-label": label,
-      onClick: (e) => {
-        e.stopPropagation();
-        handler();
-      },
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 28,
-        height: 28,
-        border: `1px solid ${tokens.colors.border.muted}`,
-        borderRadius: tokens.borderRadius.sm,
-        backgroundColor: `${tokens.colors.background.elevated}e0`,
-        color: color || tokens.colors.text.secondary,
-        cursor: "pointer",
-        transition: tokens.animation.fast,
-        backdropFilter: "blur(4px)"
-      },
-      children: icon
-    }
-  );
-  const downloadIcon = /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
-    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-  ] });
-  const deleteIcon = /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-    /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
-    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
-  ] });
-  return /* @__PURE__ */ jsxs("div", { style: { fontFamily: tokens.typography.fontFamily.primary, ...style }, children: [
-    images.length === 0 && /* @__PURE__ */ jsx("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      height: 200,
-      color: tokens.colors.text.tertiary,
-      fontSize: tokens.typography.fontSize.sm,
-      border: `1px dashed ${tokens.colors.border.muted}`,
-      borderRadius: tokens.borderRadius.md
-    }, children: emptyMessage }),
-    pageImages.length > 0 && /* @__PURE__ */ jsx("div", { style: {
-      display: "grid",
-      gridTemplateColumns: `repeat(${cols}, 1fr)`,
-      gap: tokens.spacing.sm
-    }, children: pageImages.map((img) => {
-      const isHovered = hoveredId === img.id;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "button",
-          tabIndex: 0,
-          "aria-label": `View image ${img.name || img.id}`,
-          onClick: () => handleImageClick(img),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleImageClick(img);
-            }
-          },
-          onMouseEnter: () => setHoveredId(img.id),
-          onMouseLeave: () => setHoveredId(null),
-          style: {
-            position: "relative",
-            borderRadius: tokens.borderRadius.md,
-            border: `1px solid ${tokens.colors.border.muted}`,
-            overflow: "hidden",
-            cursor: "pointer",
-            transition: tokens.animation.fast,
-            transform: isHovered ? "translateY(-2px)" : "none",
-            boxShadow: isHovered ? tokens.shadows.md : "none",
-            backgroundColor: tokens.colors.background.surface
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { style: {
-              height: thumbnailHeight,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              overflow: "hidden",
-              backgroundColor: tokens.colors.background.base
-            }, children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: img.src,
-                alt: img.name,
-                loading: "lazy",
-                onError: (e) => {
-                  const target = e.target;
-                  target.style.display = "none";
-                  target.parentElement.innerHTML = `<span style="color:${tokens.colors.text.tertiary};font-size:${tokens.typography.fontSize.xxs}">Image unavailable</span>`;
-                },
-                style: {
-                  maxWidth: "100%",
-                  maxHeight: "100%",
-                  objectFit: "contain"
-                }
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { style: {
-              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-              borderTop: `1px solid ${tokens.colors.border.muted}`
-            }, children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: tokens.typography.fontSize.xxs,
-                fontWeight: tokens.typography.fontWeight.medium,
-                color: tokens.colors.text.primary,
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
-              }, children: img.name }),
-              img.timestamp && /* @__PURE__ */ jsx("div", { style: {
-                fontSize: tokens.typography.fontSize.micro,
-                color: tokens.colors.text.tertiary,
-                fontFamily: tokens.typography.fontFamily.mono
-              }, children: formatTime(img.timestamp) })
-            ] }),
-            isHovered && /* @__PURE__ */ jsxs("div", { style: {
-              position: "absolute",
-              top: tokens.spacing.xs,
-              right: tokens.spacing.xs,
-              display: "flex",
-              gap: "4px"
-            }, children: [
-              onDownload && /* @__PURE__ */ jsx(ActionBtn, { icon: downloadIcon, label: "Download", onClick: () => onDownload(img) }),
-              onDelete && /* @__PURE__ */ jsx(ActionBtn, { icon: deleteIcon, label: "Delete", onClick: () => onDelete(img), color: tokens.colors.status.critical })
-            ] })
-          ]
-        },
-        img.id
-      );
-    }) }),
-    totalPages > 1 && /* @__PURE__ */ jsx("div", { style: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      marginTop: tokens.spacing.md
-    }, children: /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        currentPage: currentPage + 1,
-        totalPages,
-        onChange: (page) => setCurrentPage(Math.max(0, page - 1)),
-        showFirstLast: false,
-        displayMode: "text",
-        size: "small"
-      }
-    ) }),
-    selectedImage && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": "true",
-          onClick: () => setSelectedImage(null),
-          style: {
-            position: "fixed",
-            inset: 0,
-            zIndex: 9998,
-            backgroundColor: `${tokens.colors.background.base}e0`,
-            backdropFilter: "blur(8px)",
-            animation: `zendir-lb-fade 200ms ${tokens.animation.easing.default}`
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": `Image: ${selectedImage.name}`,
-          onClick: () => setSelectedImage(null),
-          style: {
-            position: "fixed",
-            inset: 0,
-            zIndex: 9999,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: tokens.spacing.xl
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: selectedImage.src,
-                alt: selectedImage.name,
-                onClick: (e) => e.stopPropagation(),
-                style: {
-                  maxWidth: "90vw",
-                  maxHeight: "80vh",
-                  objectFit: "contain",
-                  borderRadius: tokens.borderRadius.md,
-                  boxShadow: tokens.shadows.xl,
-                  animation: `zendir-lb-scale 250ms ${tokens.animation.easing.default}`
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: tokens.spacing.md,
-                  marginTop: tokens.spacing.md
-                },
-                onClick: (e) => e.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ jsx("span", { style: {
-                    color: tokens.colors.text.primary,
-                    fontSize: tokens.typography.fontSize.sm,
-                    fontWeight: tokens.typography.fontWeight.medium
-                  }, children: selectedImage.name }),
-                  onDownload && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => onDownload(selectedImage),
-                      style: {
-                        padding: "6px 16px",
-                        fontSize: tokens.typography.fontSize.xs,
-                        color: tokens.colors.text.primary,
-                        backgroundColor: `${tokens.colors.accent.primary}20`,
-                        border: `1px solid ${tokens.colors.accent.primary}40`,
-                        borderRadius: tokens.borderRadius.md,
-                        cursor: "pointer",
-                        fontFamily: tokens.typography.fontFamily.primary
-                      },
-                      children: "Download"
-                    }
-                  ),
-                  onDelete && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        onDelete(selectedImage);
-                        setSelectedImage(null);
-                      },
-                      style: {
-                        padding: "6px 16px",
-                        fontSize: tokens.typography.fontSize.xs,
-                        color: tokens.colors.status.critical,
-                        backgroundColor: `${tokens.colors.status.critical}15`,
-                        border: `1px solid ${tokens.colors.status.critical}30`,
-                        borderRadius: tokens.borderRadius.md,
-                        cursor: "pointer",
-                        fontFamily: tokens.typography.fontFamily.primary
-                      },
-                      children: "Delete"
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("style", { children: `
+import { memo, useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/ImageGallery.tsx
+/**
+* @zendir/ui - ImageGallery Component
+*
+* Grid of image thumbnails with lightbox, download, delete, and pagination.
+* Designed for spacecraft image capture galleries in operator dashboards.
+*
+* Astro UX Compliance:
+* - Consistent card styling with GlassCard
+* - Status-based border colors
+* - Keyboard navigation (Escape to close lightbox)
+* - Focus management
+*
+* @example
+* ```tsx
+* <ImageGallery
+*   images={[
+*     { id: '1', name: 'capture_001.png', src: dataUrl, timestamp: Date.now() },
+*     { id: '2', name: 'capture_002.png', src: dataUrl, timestamp: Date.now() },
+*   ]}
+*   columns={[2, 3, 4]}
+*   onDownload={(img) => saveAs(img.src, img.name)}
+*   onDelete={(img) => removeImage(img.id)}
+*   pageSize={12}
+* />
+* ```
+*/
+var ImageGallery = memo(function ImageGallery({ images, columns = [
+	2,
+	3,
+	4
+], pageSize = 12, onDownload, onDelete, onClick, lightbox = true, thumbnailHeight = 140, emptyMessage = "No images captured", newCount: _newCount, style }) {
+	const { tokens } = useTheme();
+	const { breakpoint } = useBreakpoint();
+	const [currentPage, setCurrentPage] = useState(0);
+	const [selectedImage, setSelectedImage] = useState(null);
+	const [hoveredId, setHoveredId] = useState(null);
+	const cols = Array.isArray(columns) ? resolveResponsiveValue(columns, breakpoint) : columns;
+	const totalPages = pageSize > 0 ? Math.ceil(images.length / pageSize) : 1;
+	const pageImages = pageSize > 0 ? images.slice(currentPage * pageSize, (currentPage + 1) * pageSize) : images;
+	useEffect(() => {
+		if (currentPage >= totalPages && totalPages > 0) setCurrentPage(totalPages - 1);
+	}, [
+		images.length,
+		totalPages,
+		currentPage
+	]);
+	useEffect(() => {
+		if (!selectedImage) return;
+		const handler = (e) => {
+			if (e.key === "Escape") setSelectedImage(null);
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [selectedImage]);
+	const handleImageClick = useCallback((img) => {
+		onClick?.(img);
+		if (lightbox) setSelectedImage(img);
+	}, [onClick, lightbox]);
+	const formatTime = (ts) => {
+		if (!ts) return "";
+		return new Date(ts).toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit"
+		});
+	};
+	const ActionBtn = ({ icon, label, onClick: handler, color }) => /* @__PURE__ */ jsx("button", {
+		"aria-label": label,
+		onClick: (e) => {
+			e.stopPropagation();
+			handler();
+		},
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 28,
+			height: 28,
+			border: `1px solid ${tokens.colors.border.muted}`,
+			borderRadius: tokens.borderRadius.sm,
+			backgroundColor: `${tokens.colors.background.elevated}e0`,
+			color: color || tokens.colors.text.secondary,
+			cursor: "pointer",
+			transition: tokens.animation.fast,
+			backdropFilter: "blur(4px)"
+		},
+		children: icon
+	});
+	const downloadIcon = /* @__PURE__ */ jsxs("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+			/* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				y1: "15",
+				x2: "12",
+				y2: "3"
+			})
+		]
+	});
+	const deleteIcon = /* @__PURE__ */ jsxs("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		children: [/* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }), /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			fontFamily: tokens.typography.fontFamily.primary,
+			...style
+		},
+		children: [
+			images.length === 0 && /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					height: 200,
+					color: tokens.colors.text.tertiary,
+					fontSize: tokens.typography.fontSize.sm,
+					border: `1px dashed ${tokens.colors.border.muted}`,
+					borderRadius: tokens.borderRadius.md
+				},
+				children: emptyMessage
+			}),
+			pageImages.length > 0 && /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: `repeat(${cols}, 1fr)`,
+					gap: tokens.spacing.sm
+				},
+				children: pageImages.map((img) => {
+					const isHovered = hoveredId === img.id;
+					return /* @__PURE__ */ jsxs("div", {
+						role: "button",
+						tabIndex: 0,
+						"aria-label": `View image ${img.name || img.id}`,
+						onClick: () => handleImageClick(img),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleImageClick(img);
+							}
+						},
+						onMouseEnter: () => setHoveredId(img.id),
+						onMouseLeave: () => setHoveredId(null),
+						style: {
+							position: "relative",
+							borderRadius: tokens.borderRadius.md,
+							border: `1px solid ${tokens.colors.border.muted}`,
+							overflow: "hidden",
+							cursor: "pointer",
+							transition: tokens.animation.fast,
+							transform: isHovered ? "translateY(-2px)" : "none",
+							boxShadow: isHovered ? tokens.shadows.md : "none",
+							backgroundColor: tokens.colors.background.surface
+						},
+						children: [
+							img.badge ? /* @__PURE__ */ jsx("span", {
+								style: {
+									position: "absolute",
+									top: tokens.spacing.xs,
+									left: tokens.spacing.xs,
+									zIndex: 1,
+									padding: `2px ${tokens.spacing.xs}`,
+									borderRadius: tokens.borderRadius.sm,
+									backgroundColor: tokens.colors.accent.primary,
+									color: "#fff",
+									fontSize: tokens.typography.fontSize.micro,
+									fontWeight: tokens.typography.fontWeight.bold,
+									letterSpacing: "0.06em",
+									textTransform: "uppercase",
+									lineHeight: 1.4,
+									pointerEvents: "none",
+									boxShadow: tokens.shadows.sm
+								},
+								children: img.badge
+							}) : null,
+							/* @__PURE__ */ jsx("div", {
+								style: {
+									height: thumbnailHeight,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									overflow: "hidden",
+									backgroundColor: tokens.colors.background.base
+								},
+								children: /* @__PURE__ */ jsx("img", {
+									src: img.src,
+									alt: img.name,
+									loading: "lazy",
+									onError: (e) => {
+										const target = e.target;
+										target.style.display = "none";
+										target.parentElement.innerHTML = `<span style="color:${tokens.colors.text.tertiary};font-size:${tokens.typography.fontSize.xxs}">Image unavailable</span>`;
+									},
+									style: {
+										maxWidth: "100%",
+										maxHeight: "100%",
+										objectFit: "contain"
+									}
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: {
+									padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+									borderTop: `1px solid ${tokens.colors.border.muted}`
+								},
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: tokens.typography.fontSize.xxs,
+										fontWeight: tokens.typography.fontWeight.medium,
+										color: tokens.colors.text.primary,
+										whiteSpace: "nowrap",
+										overflow: "hidden",
+										textOverflow: "ellipsis"
+									},
+									children: img.name
+								}), img.timestamp && /* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: tokens.typography.fontSize.micro,
+										color: tokens.colors.text.tertiary,
+										fontFamily: tokens.typography.fontFamily.mono
+									},
+									children: formatTime(img.timestamp)
+								})]
+							}),
+							isHovered && /* @__PURE__ */ jsxs("div", {
+								style: {
+									position: "absolute",
+									top: tokens.spacing.xs,
+									right: tokens.spacing.xs,
+									display: "flex",
+									gap: "4px"
+								},
+								children: [onDownload && /* @__PURE__ */ jsx(ActionBtn, {
+									icon: downloadIcon,
+									label: "Download",
+									onClick: () => onDownload(img)
+								}), onDelete && /* @__PURE__ */ jsx(ActionBtn, {
+									icon: deleteIcon,
+									label: "Delete",
+									onClick: () => onDelete(img),
+									color: tokens.colors.status.critical
+								})]
+							})
+						]
+					}, img.id);
+				})
+			}),
+			totalPages > 1 && /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					marginTop: tokens.spacing.md
+				},
+				children: /* @__PURE__ */ jsx(Pagination, {
+					currentPage: currentPage + 1,
+					totalPages,
+					onChange: (page) => setCurrentPage(Math.max(0, page - 1)),
+					showFirstLast: false,
+					displayMode: "text",
+					size: "small"
+				})
+			}),
+			selectedImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					onClick: () => setSelectedImage(null),
+					style: {
+						position: "fixed",
+						inset: 0,
+						zIndex: 9998,
+						backgroundColor: `${tokens.colors.background.base}e0`,
+						backdropFilter: "blur(8px)",
+						animation: `zendir-lb-fade 200ms ${tokens.animation.easing.default}`
+					}
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": `Image: ${selectedImage.name}`,
+					onClick: () => setSelectedImage(null),
+					style: {
+						position: "fixed",
+						inset: 0,
+						zIndex: 9999,
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						justifyContent: "center",
+						padding: tokens.spacing.xl
+					},
+					children: [/* @__PURE__ */ jsx("img", {
+						src: selectedImage.src,
+						alt: selectedImage.name,
+						onClick: (e) => e.stopPropagation(),
+						style: {
+							maxWidth: "90vw",
+							maxHeight: "80vh",
+							objectFit: "contain",
+							borderRadius: tokens.borderRadius.md,
+							boxShadow: tokens.shadows.xl,
+							animation: `zendir-lb-scale 250ms ${tokens.animation.easing.default}`
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.md,
+							marginTop: tokens.spacing.md
+						},
+						onClick: (e) => e.stopPropagation(),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								style: {
+									color: tokens.colors.text.primary,
+									fontSize: tokens.typography.fontSize.sm,
+									fontWeight: tokens.typography.fontWeight.medium
+								},
+								children: selectedImage.name
+							}),
+							onDownload && /* @__PURE__ */ jsx("button", {
+								onClick: () => onDownload(selectedImage),
+								style: {
+									padding: "6px 16px",
+									fontSize: tokens.typography.fontSize.xs,
+									color: tokens.colors.text.primary,
+									backgroundColor: `${tokens.colors.accent.primary}20`,
+									border: `1px solid ${tokens.colors.accent.primary}40`,
+									borderRadius: tokens.borderRadius.md,
+									cursor: "pointer",
+									fontFamily: tokens.typography.fontFamily.primary
+								},
+								children: "Download"
+							}),
+							onDelete && /* @__PURE__ */ jsx("button", {
+								onClick: () => {
+									onDelete(selectedImage);
+									setSelectedImage(null);
+								},
+								style: {
+									padding: "6px 16px",
+									fontSize: tokens.typography.fontSize.xs,
+									color: tokens.colors.status.critical,
+									backgroundColor: `${tokens.colors.status.critical}15`,
+									border: `1px solid ${tokens.colors.status.critical}30`,
+									borderRadius: tokens.borderRadius.md,
+									cursor: "pointer",
+									fontFamily: tokens.typography.fontFamily.primary
+								},
+								children: "Delete"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("style", { children: `
             @keyframes zendir-lb-fade { from { opacity: 0; } to { opacity: 1; } }
             @keyframes zendir-lb-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
           ` })
-    ] })
-  ] });
+			] })
+		]
+	});
 });
-export {
-  ImageGallery
-};
-//# sourceMappingURL=ImageGallery.js.map
+//#endregion
+export { ImageGallery, ImageGallery as default };
+
+//# sourceMappingURL=ImageGallery.js.map