@zendir/ui 0.5.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"ImageGallery.js","sources":["../../../../src/react/core/widgets/ImageGallery.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - ImageGallery Component\r\n * \r\n * Grid of image thumbnails with lightbox, download, delete, and pagination.\r\n * Designed for spacecraft image capture galleries in operator dashboards.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent card styling with GlassCard\r\n * - Status-based border colors\r\n * - Keyboard navigation (Escape to close lightbox)\r\n * - Focus management\r\n * \r\n * @example\r\n * ```tsx\r\n * <ImageGallery\r\n *   images={[\r\n *     { id: '1', name: 'capture_001.png', src: dataUrl, timestamp: Date.now() },\r\n *     { id: '2', name: 'capture_002.png', src: dataUrl, timestamp: Date.now() },\r\n *   ]}\r\n *   columns={[2, 3, 4]}\r\n *   onDownload={(img) => saveAs(img.src, img.name)}\r\n *   onDelete={(img) => removeImage(img.id)}\r\n *   pageSize={12}\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useCallback, useEffect } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { useBreakpoint } from '../layout/useBreakpoint';\r\nimport { resolveResponsiveValue } from '../layout/useBreakpoint';\r\nimport type { ResponsiveValue } from '../layout/useBreakpoint';\r\nimport { Pagination } from '../navigation/Pagination';\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport interface GalleryImage {\r\n  /** Unique identifier */\r\n  id: string;\r\n  /** Display name */\r\n  name: string;\r\n  /** Image source URL or data URL */\r\n  src: string;\r\n  /** Timestamp (ms since epoch) */\r\n  timestamp?: number;\r\n  /** Optional metadata */\r\n  metadata?: Record<string, unknown>;\r\n}\r\n\r\nexport interface ImageGalleryProps {\r\n  /** Array of images */\r\n  images: GalleryImage[];\r\n  /** Number of columns (responsive) */\r\n  columns?: ResponsiveValue<number>;\r\n  /** Images per page (0 = no pagination) */\r\n  pageSize?: number;\r\n  /** Download handler */\r\n  onDownload?: (image: GalleryImage) => void;\r\n  /** Delete handler (shows delete button when provided) */\r\n  onDelete?: (image: GalleryImage) => void;\r\n  /** Click handler */\r\n  onClick?: (image: GalleryImage) => void;\r\n  /** Show lightbox on click (default true) */\r\n  lightbox?: boolean;\r\n  /** Thumbnail height */\r\n  thumbnailHeight?: number;\r\n  /** Empty state message */\r\n  emptyMessage?: string;\r\n  /** New image badge count (shows badge on component) */\r\n  newCount?: number;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const ImageGallery = memo(function ImageGallery({\r\n  images,\r\n  columns = [2, 3, 4],\r\n  pageSize = 12,\r\n  onDownload,\r\n  onDelete,\r\n  onClick,\r\n  lightbox = true,\r\n  thumbnailHeight = 140,\r\n  emptyMessage = 'No images captured',\r\n  newCount: _newCount,\r\n  style,\r\n}: ImageGalleryProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { breakpoint } = useBreakpoint();\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);\r\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\r\n  \r\n  const cols = Array.isArray(columns) ? resolveResponsiveValue(columns, breakpoint) : columns;\r\n  const totalPages = pageSize > 0 ? Math.ceil(images.length / pageSize) : 1;\r\n  const pageImages = pageSize > 0\r\n    ? images.slice(currentPage * pageSize, (currentPage + 1) * pageSize)\r\n    : images;\r\n  \r\n  // Reset page if images change\r\n  useEffect(() => {\r\n    if (currentPage >= totalPages && totalPages > 0) {\r\n      setCurrentPage(totalPages - 1);\r\n    }\r\n  }, [images.length, totalPages, currentPage]);\r\n  \r\n  // Lightbox keyboard\r\n  useEffect(() => {\r\n    if (!selectedImage) return;\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') setSelectedImage(null);\r\n    };\r\n    document.addEventListener('keydown', handler);\r\n    return () => document.removeEventListener('keydown', handler);\r\n  }, [selectedImage]);\r\n  \r\n  const handleImageClick = useCallback((img: GalleryImage) => {\r\n    onClick?.(img);\r\n    if (lightbox) setSelectedImage(img);\r\n  }, [onClick, lightbox]);\r\n  \r\n  const formatTime = (ts?: number) => {\r\n    if (!ts) return '';\r\n    const d = new Date(ts);\r\n    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });\r\n  };\r\n  \r\n  // Action button helper\r\n  const ActionBtn = ({ icon, label, onClick: handler, color }: { icon: React.ReactNode; label: string; onClick: () => void; color?: string }) => (\r\n    <button\r\n      aria-label={label}\r\n      onClick={(e) => { e.stopPropagation(); handler(); }}\r\n      style={{\r\n        display: 'flex', alignItems: 'center', justifyContent: 'center',\r\n        width: 28, height: 28,\r\n        border: `1px solid ${tokens.colors.border.muted}`,\r\n        borderRadius: tokens.borderRadius.sm,\r\n        backgroundColor: `${tokens.colors.background.elevated}e0`,\r\n        color: color || tokens.colors.text.secondary,\r\n        cursor: 'pointer', transition: tokens.animation.fast,\r\n        backdropFilter: 'blur(4px)',\r\n      }}\r\n    >\r\n      {icon}\r\n    </button>\r\n  );\r\n  \r\n  // Download icon\r\n  const downloadIcon = <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>;\r\n  // Delete icon\r\n  const deleteIcon = <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"><polyline points=\"3 6 5 6 21 6\"/><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\"/></svg>;\r\n  \r\n  return (\r\n    <div style={{ fontFamily: tokens.typography.fontFamily.primary, ...style }}>\r\n      {/* Empty state */}\r\n      {images.length === 0 && (\r\n        <div style={{\r\n          display: 'flex', alignItems: 'center', justifyContent: 'center',\r\n          height: 200, color: tokens.colors.text.tertiary,\r\n          fontSize: tokens.typography.fontSize.sm,\r\n          border: `1px dashed ${tokens.colors.border.muted}`,\r\n          borderRadius: tokens.borderRadius.md,\r\n        }}>\r\n          {emptyMessage}\r\n        </div>\r\n      )}\r\n      \r\n      {/* Grid */}\r\n      {pageImages.length > 0 && (\r\n        <div style={{\r\n          display: 'grid',\r\n          gridTemplateColumns: `repeat(${cols}, 1fr)`,\r\n          gap: tokens.spacing.sm,\r\n        }}>\r\n          {pageImages.map(img => {\r\n            const isHovered = hoveredId === img.id;\r\n            return (\r\n              <div\r\n                key={img.id}\r\n                role=\"button\"\r\n                tabIndex={0}\r\n                aria-label={`View image ${img.name || img.id}`}\r\n                onClick={() => handleImageClick(img)}\r\n                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleImageClick(img); } }}\r\n                onMouseEnter={() => setHoveredId(img.id)}\r\n                onMouseLeave={() => setHoveredId(null)}\r\n                style={{\r\n                  position: 'relative',\r\n                  borderRadius: tokens.borderRadius.md,\r\n                  border: `1px solid ${tokens.colors.border.muted}`,\r\n                  overflow: 'hidden',\r\n                  cursor: 'pointer',\r\n                  transition: tokens.animation.fast,\r\n                  transform: isHovered ? 'translateY(-2px)' : 'none',\r\n                  boxShadow: isHovered ? tokens.shadows.md : 'none',\r\n                  backgroundColor: tokens.colors.background.surface,\r\n                }}\r\n              >\r\n                {/* Thumbnail */}\r\n                <div style={{\r\n                  height: thumbnailHeight,\r\n                  display: 'flex', alignItems: 'center', justifyContent: 'center',\r\n                  overflow: 'hidden',\r\n                  backgroundColor: tokens.colors.background.base,\r\n                }}>\r\n                  <img\r\n                    src={img.src}\r\n                    alt={img.name}\r\n                    loading=\"lazy\"\r\n                    onError={(e) => {\r\n                      const target = e.target as HTMLImageElement;\r\n                      target.style.display = 'none';\r\n                      target.parentElement!.innerHTML = `<span style=\"color:${tokens.colors.text.tertiary};font-size:${tokens.typography.fontSize.xxs}\">Image unavailable</span>`;\r\n                    }}\r\n                    style={{\r\n                      maxWidth: '100%', maxHeight: '100%',\r\n                      objectFit: 'contain',\r\n                    }}\r\n                  />\r\n                </div>\r\n                \r\n                {/* Info bar */}\r\n                <div style={{\r\n                  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n                  borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n                }}>\r\n                  <div style={{\r\n                    fontSize: tokens.typography.fontSize.xxs,\r\n                    fontWeight: tokens.typography.fontWeight.medium,\r\n                    color: tokens.colors.text.primary,\r\n                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',\r\n                  }}>\r\n                    {img.name}\r\n                  </div>\r\n                  {img.timestamp && (\r\n                    <div style={{\r\n                      fontSize: tokens.typography.fontSize.micro,\r\n                      color: tokens.colors.text.tertiary,\r\n                      fontFamily: tokens.typography.fontFamily.mono,\r\n                    }}>\r\n                      {formatTime(img.timestamp)}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n                \r\n                {/* Hover actions */}\r\n                {isHovered && (\r\n                  <div style={{\r\n                    position: 'absolute', top: tokens.spacing.xs, right: tokens.spacing.xs,\r\n                    display: 'flex', gap: '4px',\r\n                  }}>\r\n                    {onDownload && (\r\n                      <ActionBtn icon={downloadIcon} label=\"Download\" onClick={() => onDownload(img)} />\r\n                    )}\r\n                    {onDelete && (\r\n                      <ActionBtn icon={deleteIcon} label=\"Delete\" onClick={() => onDelete(img)} color={tokens.colors.status.critical} />\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      )}\r\n      \r\n      {/* Pagination */}\r\n      {totalPages > 1 && (\r\n        <div style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n          alignItems: 'center',\r\n          marginTop: tokens.spacing.md,\r\n        }}>\r\n          <Pagination\r\n            currentPage={currentPage + 1}\r\n            totalPages={totalPages}\r\n            onChange={(page) => setCurrentPage(Math.max(0, page - 1))}\r\n            showFirstLast={false}\r\n            displayMode=\"text\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      )}\r\n      \r\n      {/* Lightbox */}\r\n      {selectedImage && (\r\n        <>\r\n          <div\r\n            aria-hidden=\"true\"\r\n            onClick={() => setSelectedImage(null)}\r\n            style={{\r\n              position: 'fixed', inset: 0, zIndex: 9998,\r\n              backgroundColor: `${tokens.colors.background.base}e0`,\r\n              backdropFilter: 'blur(8px)',\r\n              animation: `zendir-lb-fade 200ms ${tokens.animation.easing.default}`,\r\n            }}\r\n          />\r\n          <div\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            aria-label={`Image: ${selectedImage.name}`}\r\n            onClick={() => setSelectedImage(null)}\r\n            style={{\r\n              position: 'fixed', inset: 0, zIndex: 9999,\r\n              display: 'flex', flexDirection: 'column',\r\n              alignItems: 'center', justifyContent: 'center',\r\n              padding: tokens.spacing.xl,\r\n            }}\r\n          >\r\n            <img\r\n              src={selectedImage.src}\r\n              alt={selectedImage.name}\r\n              onClick={e => e.stopPropagation()}\r\n              style={{\r\n                maxWidth: '90vw', maxHeight: '80vh',\r\n                objectFit: 'contain',\r\n                borderRadius: tokens.borderRadius.md,\r\n                boxShadow: tokens.shadows.xl,\r\n                animation: `zendir-lb-scale 250ms ${tokens.animation.easing.default}`,\r\n              }}\r\n            />\r\n            <div style={{\r\n              display: 'flex', alignItems: 'center', gap: tokens.spacing.md,\r\n              marginTop: tokens.spacing.md,\r\n            }}\r\n              onClick={e => e.stopPropagation()}\r\n            >\r\n              <span style={{\r\n                color: tokens.colors.text.primary,\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n              }}>\r\n                {selectedImage.name}\r\n              </span>\r\n              {onDownload && (\r\n                <button\r\n                  onClick={() => onDownload(selectedImage)}\r\n                  style={{\r\n                    padding: '6px 16px', fontSize: tokens.typography.fontSize.xs,\r\n                    color: tokens.colors.text.primary, backgroundColor: `${tokens.colors.accent.primary}20`,\r\n                    border: `1px solid ${tokens.colors.accent.primary}40`,\r\n                    borderRadius: tokens.borderRadius.md, cursor: 'pointer',\r\n                    fontFamily: tokens.typography.fontFamily.primary,\r\n                  }}\r\n                >\r\n                  Download\r\n                </button>\r\n              )}\r\n              {onDelete && (\r\n                <button\r\n                  onClick={() => { onDelete(selectedImage); setSelectedImage(null); }}\r\n                  style={{\r\n                    padding: '6px 16px', fontSize: tokens.typography.fontSize.xs,\r\n                    color: tokens.colors.status.critical, backgroundColor: `${tokens.colors.status.critical}15`,\r\n                    border: `1px solid ${tokens.colors.status.critical}30`,\r\n                    borderRadius: tokens.borderRadius.md, cursor: 'pointer',\r\n                    fontFamily: tokens.typography.fontFamily.primary,\r\n                  }}\r\n                >\r\n                  Delete\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          <style>{`\r\n            @keyframes zendir-lb-fade { from { opacity: 0; } to { opacity: 1; } }\r\n            @keyframes zendir-lb-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }\r\n          `}</style>\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default ImageGallery;\r\n"],"names":["ImageGallery"],"mappings":";;;;;AA0EO,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA,UAAU,CAAC,GAAG,GAAG,CAAC;AAAA,EAClB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,UAAU;AAAA,EACV;AACF,GAA0C;AACxC,QAAM,EAAE,OAAA,IAAW,SAAA;AACnB,QAAM,EAAE,WAAA,IAAe,cAAA;AACvB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA8B,IAAI;AAC5E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAE9D,QAAM,OAAO,MAAM,QAAQ,OAAO,IAAI,uBAAuB,SAAS,UAAU,IAAI;AACpF,QAAM,aAAa,WAAW,IAAI,KAAK,KAAK,OAAO,SAAS,QAAQ,IAAI;AACxE,QAAM,aAAa,WAAW,IAC1B,OAAO,MAAM,cAAc,WAAW,cAAc,KAAK,QAAQ,IACjE;AAGJ,YAAU,MAAM;AACd,QAAI,eAAe,cAAc,aAAa,GAAG;AAC/C,qBAAe,aAAa,CAAC;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,YAAY,WAAW,CAAC;AAG3C,YAAU,MAAM;AACd,QAAI,CAAC,cAAe;AACpB,UAAM,UAAU,CAAC,MAAqB;AACpC,UAAI,EAAE,QAAQ,SAAU,kBAAiB,IAAI;AAAA,IAC/C;AACA,aAAS,iBAAiB,WAAW,OAAO;AAC5C,WAAO,MAAM,SAAS,oBAAoB,WAAW,OAAO;AAAA,EAC9D,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,mBAAmB,YAAY,CAAC,QAAsB;AAC1D,uCAAU;AACV,QAAI,2BAA2B,GAAG;AAAA,EACpC,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,QAAM,aAAa,CAAC,OAAgB;AAClC,QAAI,CAAC,GAAI,QAAO;AAChB,UAAM,IAAI,IAAI,KAAK,EAAE;AACrB,WAAO,EAAE,mBAAmB,CAAA,GAAI,EAAE,MAAM,WAAW,QAAQ,WAAW,QAAQ,WAAW;AAAA,EAC3F;AAGA,QAAM,YAAY,CAAC,EAAE,MAAM,OAAO,SAAS,SAAS,YAClD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAY;AAAA,MACZ,SAAS,CAAC,MAAM;AAAE,UAAE,gBAAA;AAAmB,gBAAA;AAAA,MAAW;AAAA,MAClD,OAAO;AAAA,QACL,SAAS;AAAA,QAAQ,YAAY;AAAA,QAAU,gBAAgB;AAAA,QACvD,OAAO;AAAA,QAAI,QAAQ;AAAA,QACnB,QAAQ,aAAa,OAAO,OAAO,OAAO,KAAK;AAAA,QAC/C,cAAc,OAAO,aAAa;AAAA,QAClC,iBAAiB,GAAG,OAAO,OAAO,WAAW,QAAQ;AAAA,QACrD,OAAO,SAAS,OAAO,OAAO,KAAK;AAAA,QACnC,QAAQ;AAAA,QAAW,YAAY,OAAO,UAAU;AAAA,QAChD,gBAAgB;AAAA,MAAA;AAAA,MAGjB,UAAA;AAAA,IAAA;AAAA,EAAA;AAKL,QAAM,eAAe,qBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,GAAE,4CAAA,CAA2C;AAAA,IAAE,oBAAC,YAAA,EAAS,QAAO,mBAAA,CAAkB;AAAA,IAAE,oBAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,IAAA,CAAG;AAAA,EAAA,GAAE;AAE7Q,QAAM,aAAa,qBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAS,QAAO,eAAA,CAAc;AAAA,IAAE,oBAAC,QAAA,EAAK,GAAE,iFAAA,CAAgF;AAAA,EAAA,GAAE;AAEtQ,SACE,qBAAC,OAAA,EAAI,OAAO,EAAE,YAAY,OAAO,WAAW,WAAW,SAAS,GAAG,MAAA,GAEhE,UAAA;AAAA,IAAA,OAAO,WAAW,KACjB,oBAAC,OAAA,EAAI,OAAO;AAAA,MACV,SAAS;AAAA,MAAQ,YAAY;AAAA,MAAU,gBAAgB;AAAA,MACvD,QAAQ;AAAA,MAAK,OAAO,OAAO,OAAO,KAAK;AAAA,MACvC,UAAU,OAAO,WAAW,SAAS;AAAA,MACrC,QAAQ,cAAc,OAAO,OAAO,OAAO,KAAK;AAAA,MAChD,cAAc,OAAO,aAAa;AAAA,IAAA,GAEjC,UAAA,cACH;AAAA,IAID,WAAW,SAAS,KACnB,oBAAC,SAAI,OAAO;AAAA,MACV,SAAS;AAAA,MACT,qBAAqB,UAAU,IAAI;AAAA,MACnC,KAAK,OAAO,QAAQ;AAAA,IAAA,GAEnB,UAAA,WAAW,IAAI,CAAA,QAAO;AACrB,YAAM,YAAY,cAAc,IAAI;AACpC,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,cAAY,cAAc,IAAI,QAAQ,IAAI,EAAE;AAAA,UAC5C,SAAS,MAAM,iBAAiB,GAAG;AAAA,UACnC,WAAW,CAAC,MAAM;AAAE,gBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,gBAAE,eAAA;AAAkB,+BAAiB,GAAG;AAAA,YAAG;AAAA,UAAE;AAAA,UAC3G,cAAc,MAAM,aAAa,IAAI,EAAE;AAAA,UACvC,cAAc,MAAM,aAAa,IAAI;AAAA,UACrC,OAAO;AAAA,YACL,UAAU;AAAA,YACV,cAAc,OAAO,aAAa;AAAA,YAClC,QAAQ,aAAa,OAAO,OAAO,OAAO,KAAK;AAAA,YAC/C,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,YAAY,OAAO,UAAU;AAAA,YAC7B,WAAW,YAAY,qBAAqB;AAAA,YAC5C,WAAW,YAAY,OAAO,QAAQ,KAAK;AAAA,YAC3C,iBAAiB,OAAO,OAAO,WAAW;AAAA,UAAA;AAAA,UAI5C,UAAA;AAAA,YAAA,oBAAC,SAAI,OAAO;AAAA,cACV,QAAQ;AAAA,cACR,SAAS;AAAA,cAAQ,YAAY;AAAA,cAAU,gBAAgB;AAAA,cACvD,UAAU;AAAA,cACV,iBAAiB,OAAO,OAAO,WAAW;AAAA,YAAA,GAE1C,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,IAAI;AAAA,gBACT,KAAK,IAAI;AAAA,gBACT,SAAQ;AAAA,gBACR,SAAS,CAAC,MAAM;AACd,wBAAM,SAAS,EAAE;AACjB,yBAAO,MAAM,UAAU;AACvB,yBAAO,cAAe,YAAY,sBAAsB,OAAO,OAAO,KAAK,QAAQ,cAAc,OAAO,WAAW,SAAS,GAAG;AAAA,gBACjI;AAAA,gBACA,OAAO;AAAA,kBACL,UAAU;AAAA,kBAAQ,WAAW;AAAA,kBAC7B,WAAW;AAAA,gBAAA;AAAA,cACb;AAAA,YAAA,GAEJ;AAAA,YAGA,qBAAC,SAAI,OAAO;AAAA,cACV,SAAS,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE;AAAA,cAClD,WAAW,aAAa,OAAO,OAAO,OAAO,KAAK;AAAA,YAAA,GAElD,UAAA;AAAA,cAAA,oBAAC,SAAI,OAAO;AAAA,gBACV,UAAU,OAAO,WAAW,SAAS;AAAA,gBACrC,YAAY,OAAO,WAAW,WAAW;AAAA,gBACzC,OAAO,OAAO,OAAO,KAAK;AAAA,gBAC1B,YAAY;AAAA,gBAAU,UAAU;AAAA,gBAAU,cAAc;AAAA,cAAA,GAEvD,cAAI,MACP;AAAA,cACC,IAAI,aACH,oBAAC,OAAA,EAAI,OAAO;AAAA,gBACV,UAAU,OAAO,WAAW,SAAS;AAAA,gBACrC,OAAO,OAAO,OAAO,KAAK;AAAA,gBAC1B,YAAY,OAAO,WAAW,WAAW;AAAA,cAAA,GAExC,UAAA,WAAW,IAAI,SAAS,EAAA,CAC3B;AAAA,YAAA,GAEJ;AAAA,YAGC,aACC,qBAAC,OAAA,EAAI,OAAO;AAAA,cACV,UAAU;AAAA,cAAY,KAAK,OAAO,QAAQ;AAAA,cAAI,OAAO,OAAO,QAAQ;AAAA,cACpE,SAAS;AAAA,cAAQ,KAAK;AAAA,YAAA,GAErB,UAAA;AAAA,cAAA,cACC,oBAAC,WAAA,EAAU,MAAM,cAAc,OAAM,YAAW,SAAS,MAAM,WAAW,GAAG,EAAA,CAAG;AAAA,cAEjF,YACC,oBAAC,WAAA,EAAU,MAAM,YAAY,OAAM,UAAS,SAAS,MAAM,SAAS,GAAG,GAAG,OAAO,OAAO,OAAO,OAAO,SAAA,CAAU;AAAA,YAAA,EAAA,CAEpH;AAAA,UAAA;AAAA,QAAA;AAAA,QA/EG,IAAI;AAAA,MAAA;AAAA,IAmFf,CAAC,EAAA,CACH;AAAA,IAID,aAAa,KACZ,oBAAC,OAAA,EAAI,OAAO;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW,OAAO,QAAQ;AAAA,IAAA,GAE1B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa,cAAc;AAAA,QAC3B;AAAA,QACA,UAAU,CAAC,SAAS,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,QACxD,eAAe;AAAA,QACf,aAAY;AAAA,QACZ,MAAK;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,IAID,iBACC,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,OAAO;AAAA,YACL,UAAU;AAAA,YAAS,OAAO;AAAA,YAAG,QAAQ;AAAA,YACrC,iBAAiB,GAAG,OAAO,OAAO,WAAW,IAAI;AAAA,YACjD,gBAAgB;AAAA,YAChB,WAAW,wBAAwB,OAAO,UAAU,OAAO,OAAO;AAAA,UAAA;AAAA,QACpE;AAAA,MAAA;AAAA,MAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,cAAY,UAAU,cAAc,IAAI;AAAA,UACxC,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,OAAO;AAAA,YACL,UAAU;AAAA,YAAS,OAAO;AAAA,YAAG,QAAQ;AAAA,YACrC,SAAS;AAAA,YAAQ,eAAe;AAAA,YAChC,YAAY;AAAA,YAAU,gBAAgB;AAAA,YACtC,SAAS,OAAO,QAAQ;AAAA,UAAA;AAAA,UAG1B,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,cAAc;AAAA,gBACnB,KAAK,cAAc;AAAA,gBACnB,SAAS,CAAA,MAAK,EAAE,gBAAA;AAAA,gBAChB,OAAO;AAAA,kBACL,UAAU;AAAA,kBAAQ,WAAW;AAAA,kBAC7B,WAAW;AAAA,kBACX,cAAc,OAAO,aAAa;AAAA,kBAClC,WAAW,OAAO,QAAQ;AAAA,kBAC1B,WAAW,yBAAyB,OAAO,UAAU,OAAO,OAAO;AAAA,gBAAA;AAAA,cACrE;AAAA,YAAA;AAAA,YAEF;AAAA,cAAC;AAAA,cAAA;AAAA,gBAAI,OAAO;AAAA,kBACV,SAAS;AAAA,kBAAQ,YAAY;AAAA,kBAAU,KAAK,OAAO,QAAQ;AAAA,kBAC3D,WAAW,OAAO,QAAQ;AAAA,gBAAA;AAAA,gBAE1B,SAAS,CAAA,MAAK,EAAE,gBAAA;AAAA,gBAEhB,UAAA;AAAA,kBAAA,oBAAC,UAAK,OAAO;AAAA,oBACX,OAAO,OAAO,OAAO,KAAK;AAAA,oBAC1B,UAAU,OAAO,WAAW,SAAS;AAAA,oBACrC,YAAY,OAAO,WAAW,WAAW;AAAA,kBAAA,GAExC,wBAAc,MACjB;AAAA,kBACC,cACC;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,MAAM,WAAW,aAAa;AAAA,sBACvC,OAAO;AAAA,wBACL,SAAS;AAAA,wBAAY,UAAU,OAAO,WAAW,SAAS;AAAA,wBAC1D,OAAO,OAAO,OAAO,KAAK;AAAA,wBAAS,iBAAiB,GAAG,OAAO,OAAO,OAAO,OAAO;AAAA,wBACnF,QAAQ,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,wBACjD,cAAc,OAAO,aAAa;AAAA,wBAAI,QAAQ;AAAA,wBAC9C,YAAY,OAAO,WAAW,WAAW;AAAA,sBAAA;AAAA,sBAE5C,UAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAIF,YACC;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,MAAM;AAAE,iCAAS,aAAa;AAAG,yCAAiB,IAAI;AAAA,sBAAG;AAAA,sBAClE,OAAO;AAAA,wBACL,SAAS;AAAA,wBAAY,UAAU,OAAO,WAAW,SAAS;AAAA,wBAC1D,OAAO,OAAO,OAAO,OAAO;AAAA,wBAAU,iBAAiB,GAAG,OAAO,OAAO,OAAO,QAAQ;AAAA,wBACvF,QAAQ,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,wBAClD,cAAc,OAAO,aAAa;AAAA,wBAAI,QAAQ;AAAA,wBAC9C,YAAY,OAAO,WAAW,WAAW;AAAA,sBAAA;AAAA,sBAE5C,UAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAED;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,0BAED,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA,YAAA,CAGN;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"ImageGallery.js","names":[],"sources":["../../../../src/react/core/widgets/ImageGallery.tsx"],"sourcesContent":["/**\n * @zendir/ui - ImageGallery Component\n *\n * Grid of image thumbnails with lightbox, download, delete, and pagination.\n * Designed for spacecraft image capture galleries in operator dashboards.\n *\n * Astro UX Compliance:\n * - Consistent card styling with GlassCard\n * - Status-based border colors\n * - Keyboard navigation (Escape to close lightbox)\n * - Focus management\n *\n * @example\n * ```tsx\n * <ImageGallery\n *   images={[\n *     { id: '1', name: 'capture_001.png', src: dataUrl, timestamp: Date.now() },\n *     { id: '2', name: 'capture_002.png', src: dataUrl, timestamp: Date.now() },\n *   ]}\n *   columns={[2, 3, 4]}\n *   onDownload={(img) => saveAs(img.src, img.name)}\n *   onDelete={(img) => removeImage(img.id)}\n *   pageSize={12}\n * />\n * ```\n */\n\nimport React, { memo, useState, useCallback, useEffect } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { useBreakpoint } from \"../layout/useBreakpoint\";\nimport { resolveResponsiveValue } from \"../layout/useBreakpoint\";\nimport type { ResponsiveValue } from \"../layout/useBreakpoint\";\nimport { Pagination } from \"../navigation/Pagination\";\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface GalleryImage {\n  /** Unique identifier */\n  id: string;\n  /** Display name */\n  name: string;\n  /** Image source URL or data URL */\n  src: string;\n  /** Timestamp (ms since epoch) */\n  timestamp?: number;\n  /** Optional short label shown as a pill over the thumbnail (e.g. \"NEW\"). */\n  badge?: string;\n  /** Optional metadata */\n  metadata?: Record<string, unknown>;\n}\n\nexport interface ImageGalleryProps {\n  /** Array of images */\n  images: GalleryImage[];\n  /** Number of columns (responsive) */\n  columns?: ResponsiveValue<number>;\n  /** Images per page (0 = no pagination) */\n  pageSize?: number;\n  /** Download handler */\n  onDownload?: (image: GalleryImage) => void;\n  /** Delete handler (shows delete button when provided) */\n  onDelete?: (image: GalleryImage) => void;\n  /** Click handler */\n  onClick?: (image: GalleryImage) => void;\n  /** Show lightbox on click (default true) */\n  lightbox?: boolean;\n  /** Thumbnail height */\n  thumbnailHeight?: number;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** New image badge count (shows badge on component) */\n  newCount?: number;\n  /** Custom style */\n  style?: React.CSSProperties;\n}\n\nexport const ImageGallery = memo(function ImageGallery({\n  images,\n  columns = [2, 3, 4],\n  pageSize = 12,\n  onDownload,\n  onDelete,\n  onClick,\n  lightbox = true,\n  thumbnailHeight = 140,\n  emptyMessage = \"No images captured\",\n  newCount: _newCount,\n  style,\n}: ImageGalleryProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { breakpoint } = useBreakpoint();\n  const [currentPage, setCurrentPage] = useState(0);\n  const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\n\n  const cols = Array.isArray(columns)\n    ? resolveResponsiveValue(columns, breakpoint)\n    : columns;\n  const totalPages = pageSize > 0 ? Math.ceil(images.length / pageSize) : 1;\n  const pageImages =\n    pageSize > 0\n      ? images.slice(currentPage * pageSize, (currentPage + 1) * pageSize)\n      : images;\n\n  // Reset page if images change\n  useEffect(() => {\n    if (currentPage >= totalPages && totalPages > 0) {\n      setCurrentPage(totalPages - 1);\n    }\n  }, [images.length, totalPages, currentPage]);\n\n  // Lightbox keyboard\n  useEffect(() => {\n    if (!selectedImage) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setSelectedImage(null);\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [selectedImage]);\n\n  const handleImageClick = useCallback(\n    (img: GalleryImage) => {\n      onClick?.(img);\n      if (lightbox) setSelectedImage(img);\n    },\n    [onClick, lightbox],\n  );\n\n  const formatTime = (ts?: number) => {\n    if (!ts) return \"\";\n    const d = new Date(ts);\n    return d.toLocaleTimeString([], {\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n      second: \"2-digit\",\n    });\n  };\n\n  // Action button helper\n  const ActionBtn = ({\n    icon,\n    label,\n    onClick: handler,\n    color,\n  }: {\n    icon: React.ReactNode;\n    label: string;\n    onClick: () => void;\n    color?: string;\n  }) => (\n    <button\n      aria-label={label}\n      onClick={(e) => {\n        e.stopPropagation();\n        handler();\n      }}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        width: 28,\n        height: 28,\n        border: `1px solid ${tokens.colors.border.muted}`,\n        borderRadius: tokens.borderRadius.sm,\n        backgroundColor: `${tokens.colors.background.elevated}e0`,\n        color: color || tokens.colors.text.secondary,\n        cursor: \"pointer\",\n        transition: tokens.animation.fast,\n        backdropFilter: \"blur(4px)\",\n      }}\n    >\n      {icon}\n    </button>\n  );\n\n  // Download icon\n  const downloadIcon = (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n    >\n      <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n      <polyline points=\"7 10 12 15 17 10\" />\n      <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" />\n    </svg>\n  );\n  // Delete icon\n  const deleteIcon = (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n    >\n      <polyline points=\"3 6 5 6 21 6\" />\n      <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\" />\n    </svg>\n  );\n\n  return (\n    <div style={{ fontFamily: tokens.typography.fontFamily.primary, ...style }}>\n      {/* Empty state */}\n      {images.length === 0 && (\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            height: 200,\n            color: tokens.colors.text.tertiary,\n            fontSize: tokens.typography.fontSize.sm,\n            border: `1px dashed ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.md,\n          }}\n        >\n          {emptyMessage}\n        </div>\n      )}\n\n      {/* Grid */}\n      {pageImages.length > 0 && (\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: `repeat(${cols}, 1fr)`,\n            gap: tokens.spacing.sm,\n          }}\n        >\n          {pageImages.map((img) => {\n            const isHovered = hoveredId === img.id;\n            return (\n              <div\n                key={img.id}\n                role=\"button\"\n                tabIndex={0}\n                aria-label={`View image ${img.name || img.id}`}\n                onClick={() => handleImageClick(img)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    handleImageClick(img);\n                  }\n                }}\n                onMouseEnter={() => setHoveredId(img.id)}\n                onMouseLeave={() => setHoveredId(null)}\n                style={{\n                  position: \"relative\",\n                  borderRadius: tokens.borderRadius.md,\n                  border: `1px solid ${tokens.colors.border.muted}`,\n                  overflow: \"hidden\",\n                  cursor: \"pointer\",\n                  transition: tokens.animation.fast,\n                  transform: isHovered ? \"translateY(-2px)\" : \"none\",\n                  boxShadow: isHovered ? tokens.shadows.md : \"none\",\n                  backgroundColor: tokens.colors.background.surface,\n                }}\n              >\n                {/* Per-image badge (e.g. newest capture) — overlays the thumbnail */}\n                {img.badge ? (\n                  <span\n                    style={{\n                      position: \"absolute\",\n                      top: tokens.spacing.xs,\n                      left: tokens.spacing.xs,\n                      zIndex: 1,\n                      padding: `2px ${tokens.spacing.xs}`,\n                      borderRadius: tokens.borderRadius.sm,\n                      backgroundColor: tokens.colors.accent.primary,\n                      color: \"#fff\",\n                      fontSize: tokens.typography.fontSize.micro,\n                      fontWeight: tokens.typography.fontWeight.bold,\n                      letterSpacing: \"0.06em\",\n                      textTransform: \"uppercase\",\n                      lineHeight: 1.4,\n                      pointerEvents: \"none\",\n                      boxShadow: tokens.shadows.sm,\n                    }}\n                  >\n                    {img.badge}\n                  </span>\n                ) : null}\n\n                {/* Thumbnail */}\n                <div\n                  style={{\n                    height: thumbnailHeight,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    overflow: \"hidden\",\n                    backgroundColor: tokens.colors.background.base,\n                  }}\n                >\n                  <img\n                    src={img.src}\n                    alt={img.name}\n                    loading=\"lazy\"\n                    onError={(e) => {\n                      const target = e.target as HTMLImageElement;\n                      target.style.display = \"none\";\n                      target.parentElement!.innerHTML = `<span style=\"color:${tokens.colors.text.tertiary};font-size:${tokens.typography.fontSize.xxs}\">Image unavailable</span>`;\n                    }}\n                    style={{\n                      maxWidth: \"100%\",\n                      maxHeight: \"100%\",\n                      objectFit: \"contain\",\n                    }}\n                  />\n                </div>\n\n                {/* Info bar */}\n                <div\n                  style={{\n                    padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n                    borderTop: `1px solid ${tokens.colors.border.muted}`,\n                  }}\n                >\n                  <div\n                    style={{\n                      fontSize: tokens.typography.fontSize.xxs,\n                      fontWeight: tokens.typography.fontWeight.medium,\n                      color: tokens.colors.text.primary,\n                      whiteSpace: \"nowrap\",\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                    }}\n                  >\n                    {img.name}\n                  </div>\n                  {img.timestamp && (\n                    <div\n                      style={{\n                        fontSize: tokens.typography.fontSize.micro,\n                        color: tokens.colors.text.tertiary,\n                        fontFamily: tokens.typography.fontFamily.mono,\n                      }}\n                    >\n                      {formatTime(img.timestamp)}\n                    </div>\n                  )}\n                </div>\n\n                {/* Hover actions */}\n                {isHovered && (\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: tokens.spacing.xs,\n                      right: tokens.spacing.xs,\n                      display: \"flex\",\n                      gap: \"4px\",\n                    }}\n                  >\n                    {onDownload && (\n                      <ActionBtn\n                        icon={downloadIcon}\n                        label=\"Download\"\n                        onClick={() => onDownload(img)}\n                      />\n                    )}\n                    {onDelete && (\n                      <ActionBtn\n                        icon={deleteIcon}\n                        label=\"Delete\"\n                        onClick={() => onDelete(img)}\n                        color={tokens.colors.status.critical}\n                      />\n                    )}\n                  </div>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            marginTop: tokens.spacing.md,\n          }}\n        >\n          <Pagination\n            currentPage={currentPage + 1}\n            totalPages={totalPages}\n            onChange={(page) => setCurrentPage(Math.max(0, page - 1))}\n            showFirstLast={false}\n            displayMode=\"text\"\n            size=\"small\"\n          />\n        </div>\n      )}\n\n      {/* Lightbox */}\n      {selectedImage && (\n        <>\n          <div\n            aria-hidden=\"true\"\n            onClick={() => setSelectedImage(null)}\n            style={{\n              position: \"fixed\",\n              inset: 0,\n              zIndex: 9998,\n              backgroundColor: `${tokens.colors.background.base}e0`,\n              backdropFilter: \"blur(8px)\",\n              animation: `zendir-lb-fade 200ms ${tokens.animation.easing.default}`,\n            }}\n          />\n          <div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={`Image: ${selectedImage.name}`}\n            onClick={() => setSelectedImage(null)}\n            style={{\n              position: \"fixed\",\n              inset: 0,\n              zIndex: 9999,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              padding: tokens.spacing.xl,\n            }}\n          >\n            <img\n              src={selectedImage.src}\n              alt={selectedImage.name}\n              onClick={(e) => e.stopPropagation()}\n              style={{\n                maxWidth: \"90vw\",\n                maxHeight: \"80vh\",\n                objectFit: \"contain\",\n                borderRadius: tokens.borderRadius.md,\n                boxShadow: tokens.shadows.xl,\n                animation: `zendir-lb-scale 250ms ${tokens.animation.easing.default}`,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: tokens.spacing.md,\n                marginTop: tokens.spacing.md,\n              }}\n              onClick={(e) => e.stopPropagation()}\n            >\n              <span\n                style={{\n                  color: tokens.colors.text.primary,\n                  fontSize: tokens.typography.fontSize.sm,\n                  fontWeight: tokens.typography.fontWeight.medium,\n                }}\n              >\n                {selectedImage.name}\n              </span>\n              {onDownload && (\n                <button\n                  onClick={() => onDownload(selectedImage)}\n                  style={{\n                    padding: \"6px 16px\",\n                    fontSize: tokens.typography.fontSize.xs,\n                    color: tokens.colors.text.primary,\n                    backgroundColor: `${tokens.colors.accent.primary}20`,\n                    border: `1px solid ${tokens.colors.accent.primary}40`,\n                    borderRadius: tokens.borderRadius.md,\n                    cursor: \"pointer\",\n                    fontFamily: tokens.typography.fontFamily.primary,\n                  }}\n                >\n                  Download\n                </button>\n              )}\n              {onDelete && (\n                <button\n                  onClick={() => {\n                    onDelete(selectedImage);\n                    setSelectedImage(null);\n                  }}\n                  style={{\n                    padding: \"6px 16px\",\n                    fontSize: tokens.typography.fontSize.xs,\n                    color: tokens.colors.status.critical,\n                    backgroundColor: `${tokens.colors.status.critical}15`,\n                    border: `1px solid ${tokens.colors.status.critical}30`,\n                    borderRadius: tokens.borderRadius.md,\n                    cursor: \"pointer\",\n                    fontFamily: tokens.typography.fontFamily.primary,\n                  }}\n                >\n                  Delete\n                </button>\n              )}\n            </div>\n          </div>\n          <style>{`\n            @keyframes zendir-lb-fade { from { opacity: 0; } to { opacity: 1; } }\n            @keyframes zendir-lb-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }\n          `}</style>\n        </>\n      )}\n    </div>\n  );\n});\n\nexport default ImageGallery;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,IAAa,eAAe,KAAK,SAAS,aAAa,EACrD,QACA,UAAU;CAAC;CAAG;CAAG;AAAC,GAClB,WAAW,IACX,YACA,UACA,SACA,WAAW,MACX,kBAAkB,KAClB,eAAe,sBACf,UAAU,WACV,SACwC;CACxC,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAChD,MAAM,CAAC,eAAe,oBAAoB,SAA8B,IAAI;CAC5E,MAAM,CAAC,WAAW,gBAAgB,SAAwB,IAAI;CAE9D,MAAM,OAAO,MAAM,QAAQ,OAAO,IAC9B,uBAAuB,SAAS,UAAU,IAC1C;CACJ,MAAM,aAAa,WAAW,IAAI,KAAK,KAAK,OAAO,SAAS,QAAQ,IAAI;CACxE,MAAM,aACJ,WAAW,IACP,OAAO,MAAM,cAAc,WAAW,cAAc,KAAK,QAAQ,IACjE;CAGN,gBAAgB;EACd,IAAI,eAAe,cAAc,aAAa,GAC5C,eAAe,aAAa,CAAC;CAEjC,GAAG;EAAC,OAAO;EAAQ;EAAY;CAAW,CAAC;CAG3C,gBAAgB;EACd,IAAI,CAAC,eAAe;EACpB,MAAM,WAAW,MAAqB;GACpC,IAAI,EAAE,QAAQ,UAAU,iBAAiB,IAAI;EAC/C;EACA,SAAS,iBAAiB,WAAW,OAAO;EAC5C,aAAa,SAAS,oBAAoB,WAAW,OAAO;CAC9D,GAAG,CAAC,aAAa,CAAC;CAElB,MAAM,mBAAmB,aACtB,QAAsB;EACrB,UAAU,GAAG;EACb,IAAI,UAAU,iBAAiB,GAAG;CACpC,GACA,CAAC,SAAS,QAAQ,CACpB;CAEA,MAAM,cAAc,OAAgB;EAClC,IAAI,CAAC,IAAI,OAAO;EAEhB,OAAO,IADO,KAAK,EACZ,CAAA,CAAE,mBAAmB,CAAC,GAAG;GAC9B,MAAM;GACN,QAAQ;GACR,QAAQ;EACV,CAAC;CACH;CAGA,MAAM,aAAa,EACjB,MACA,OACA,SAAS,SACT,YAOA,oBAAC,UAAD;EACE,cAAY;EACZ,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,QAAQ;EACV;EACA,OAAO;GACL,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,QAAQ,aAAa,OAAO,OAAO,OAAO;GAC1C,cAAc,OAAO,aAAa;GAClC,iBAAiB,GAAG,OAAO,OAAO,WAAW,SAAS;GACtD,OAAO,SAAS,OAAO,OAAO,KAAK;GACnC,QAAQ;GACR,YAAY,OAAO,UAAU;GAC7B,gBAAgB;EAClB;YAEC;CACK,CAAA;CAIV,MAAM,eACJ,qBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;YAPhB;GASE,oBAAC,QAAD,EAAM,GAAE,4CAA6C,CAAA;GACrD,oBAAC,YAAD,EAAU,QAAO,mBAAoB,CAAA;GACrC,oBAAC,QAAD;IAAM,IAAG;IAAK,IAAG;IAAK,IAAG;IAAK,IAAG;GAAK,CAAA;EACnC;;CAGP,MAAM,aACJ,qBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;YAPhB,CASE,oBAAC,YAAD,EAAU,QAAO,eAAgB,CAAA,GACjC,oBAAC,QAAD,EAAM,GAAE,iFAAkF,CAAA,CACvF;;CAGP,OACE,qBAAC,OAAD;EAAK,OAAO;GAAE,YAAY,OAAO,WAAW,WAAW;GAAS,GAAG;EAAM;YAAzE;GAEG,OAAO,WAAW,KACjB,oBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,QAAQ;KACR,OAAO,OAAO,OAAO,KAAK;KAC1B,UAAU,OAAO,WAAW,SAAS;KACrC,QAAQ,cAAc,OAAO,OAAO,OAAO;KAC3C,cAAc,OAAO,aAAa;IACpC;cAEC;GACE,CAAA;GAIN,WAAW,SAAS,KACnB,oBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,qBAAqB,UAAU,KAAK;KACpC,KAAK,OAAO,QAAQ;IACtB;cAEC,WAAW,KAAK,QAAQ;KACvB,MAAM,YAAY,cAAc,IAAI;KACpC,OACE,qBAAC,OAAD;MAEE,MAAK;MACL,UAAU;MACV,cAAY,cAAc,IAAI,QAAQ,IAAI;MAC1C,eAAe,iBAAiB,GAAG;MACnC,YAAY,MAAM;OAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;QACtC,EAAE,eAAe;QACjB,iBAAiB,GAAG;OACtB;MACF;MACA,oBAAoB,aAAa,IAAI,EAAE;MACvC,oBAAoB,aAAa,IAAI;MACrC,OAAO;OACL,UAAU;OACV,cAAc,OAAO,aAAa;OAClC,QAAQ,aAAa,OAAO,OAAO,OAAO;OAC1C,UAAU;OACV,QAAQ;OACR,YAAY,OAAO,UAAU;OAC7B,WAAW,YAAY,qBAAqB;OAC5C,WAAW,YAAY,OAAO,QAAQ,KAAK;OAC3C,iBAAiB,OAAO,OAAO,WAAW;MAC5C;gBAxBF;OA2BG,IAAI,QACH,oBAAC,QAAD;QACE,OAAO;SACL,UAAU;SACV,KAAK,OAAO,QAAQ;SACpB,MAAM,OAAO,QAAQ;SACrB,QAAQ;SACR,SAAS,OAAO,OAAO,QAAQ;SAC/B,cAAc,OAAO,aAAa;SAClC,iBAAiB,OAAO,OAAO,OAAO;SACtC,OAAO;SACP,UAAU,OAAO,WAAW,SAAS;SACrC,YAAY,OAAO,WAAW,WAAW;SACzC,eAAe;SACf,eAAe;SACf,YAAY;SACZ,eAAe;SACf,WAAW,OAAO,QAAQ;QAC5B;kBAEC,IAAI;OACD,CAAA,IACJ;OAGJ,oBAAC,OAAD;QACE,OAAO;SACL,QAAQ;SACR,SAAS;SACT,YAAY;SACZ,gBAAgB;SAChB,UAAU;SACV,iBAAiB,OAAO,OAAO,WAAW;QAC5C;kBAEA,oBAAC,OAAD;SACE,KAAK,IAAI;SACT,KAAK,IAAI;SACT,SAAQ;SACR,UAAU,MAAM;UACd,MAAM,SAAS,EAAE;UACjB,OAAO,MAAM,UAAU;UACvB,OAAO,cAAe,YAAY,sBAAsB,OAAO,OAAO,KAAK,SAAS,aAAa,OAAO,WAAW,SAAS,IAAI;SAClI;SACA,OAAO;UACL,UAAU;UACV,WAAW;UACX,WAAW;SACb;QACD,CAAA;OACE,CAAA;OAGL,qBAAC,OAAD;QACE,OAAO;SACL,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;SAChD,WAAW,aAAa,OAAO,OAAO,OAAO;QAC/C;kBAJF,CAME,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,OAAO,WAAW,SAAS;UACrC,YAAY,OAAO,WAAW,WAAW;UACzC,OAAO,OAAO,OAAO,KAAK;UAC1B,YAAY;UACZ,UAAU;UACV,cAAc;SAChB;mBAEC,IAAI;QACF,CAAA,GACJ,IAAI,aACH,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,OAAO,WAAW,SAAS;UACrC,OAAO,OAAO,OAAO,KAAK;UAC1B,YAAY,OAAO,WAAW,WAAW;SAC3C;mBAEC,WAAW,IAAI,SAAS;QACtB,CAAA,CAEJ;;OAGJ,aACC,qBAAC,OAAD;QACE,OAAO;SACL,UAAU;SACV,KAAK,OAAO,QAAQ;SACpB,OAAO,OAAO,QAAQ;SACtB,SAAS;SACT,KAAK;QACP;kBAPF,CASG,cACC,oBAAC,WAAD;SACE,MAAM;SACN,OAAM;SACN,eAAe,WAAW,GAAG;QAC9B,CAAA,GAEF,YACC,oBAAC,WAAD;SACE,MAAM;SACN,OAAM;SACN,eAAe,SAAS,GAAG;SAC3B,OAAO,OAAO,OAAO,OAAO;QAC7B,CAAA,CAEA;;MAEJ;QA1IE,IAAI,EA0IN;IAET,CAAC;GACE,CAAA;GAIN,aAAa,KACZ,oBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,gBAAgB;KAChB,YAAY;KACZ,WAAW,OAAO,QAAQ;IAC5B;cAEA,oBAAC,YAAD;KACE,aAAa,cAAc;KACf;KACZ,WAAW,SAAS,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;KACxD,eAAe;KACf,aAAY;KACZ,MAAK;IACN,CAAA;GACE,CAAA;GAIN,iBACC,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,OAAD;KACE,eAAY;KACZ,eAAe,iBAAiB,IAAI;KACpC,OAAO;MACL,UAAU;MACV,OAAO;MACP,QAAQ;MACR,iBAAiB,GAAG,OAAO,OAAO,WAAW,KAAK;MAClD,gBAAgB;MAChB,WAAW,wBAAwB,OAAO,UAAU,OAAO;KAC7D;IACD,CAAA;IACD,qBAAC,OAAD;KACE,MAAK;KACL,cAAW;KACX,cAAY,UAAU,cAAc;KACpC,eAAe,iBAAiB,IAAI;KACpC,OAAO;MACL,UAAU;MACV,OAAO;MACP,QAAQ;MACR,SAAS;MACT,eAAe;MACf,YAAY;MACZ,gBAAgB;MAChB,SAAS,OAAO,QAAQ;KAC1B;eAdF,CAgBE,oBAAC,OAAD;MACE,KAAK,cAAc;MACnB,KAAK,cAAc;MACnB,UAAU,MAAM,EAAE,gBAAgB;MAClC,OAAO;OACL,UAAU;OACV,WAAW;OACX,WAAW;OACX,cAAc,OAAO,aAAa;OAClC,WAAW,OAAO,QAAQ;OAC1B,WAAW,yBAAyB,OAAO,UAAU,OAAO;MAC9D;KACD,CAAA,GACD,qBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,YAAY;OACZ,KAAK,OAAO,QAAQ;OACpB,WAAW,OAAO,QAAQ;MAC5B;MACA,UAAU,MAAM,EAAE,gBAAgB;gBAPpC;OASE,oBAAC,QAAD;QACE,OAAO;SACL,OAAO,OAAO,OAAO,KAAK;SAC1B,UAAU,OAAO,WAAW,SAAS;SACrC,YAAY,OAAO,WAAW,WAAW;QAC3C;kBAEC,cAAc;OACX,CAAA;OACL,cACC,oBAAC,UAAD;QACE,eAAe,WAAW,aAAa;QACvC,OAAO;SACL,SAAS;SACT,UAAU,OAAO,WAAW,SAAS;SACrC,OAAO,OAAO,OAAO,KAAK;SAC1B,iBAAiB,GAAG,OAAO,OAAO,OAAO,QAAQ;SACjD,QAAQ,aAAa,OAAO,OAAO,OAAO,QAAQ;SAClD,cAAc,OAAO,aAAa;SAClC,QAAQ;SACR,YAAY,OAAO,WAAW,WAAW;QAC3C;kBACD;OAEO,CAAA;OAET,YACC,oBAAC,UAAD;QACE,eAAe;SACb,SAAS,aAAa;SACtB,iBAAiB,IAAI;QACvB;QACA,OAAO;SACL,SAAS;SACT,UAAU,OAAO,WAAW,SAAS;SACrC,OAAO,OAAO,OAAO,OAAO;SAC5B,iBAAiB,GAAG,OAAO,OAAO,OAAO,SAAS;SAClD,QAAQ,aAAa,OAAO,OAAO,OAAO,SAAS;SACnD,cAAc,OAAO,aAAa;SAClC,QAAQ;SACR,YAAY,OAAO,WAAW,WAAW;QAC3C;kBACD;OAEO,CAAA;MAEP;OACF;;IACL,oBAAC,SAAD,EAAA,UAAQ;;;YAGC,CAAA;GACT,EAAA,CAAA;EAED;;AAET,CAAC"}

package/dist/react/core/widgets/ImagePanel.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { ImageColormap } from './ImageFrame';
-
 export interface ImagePanelProps {
     /** Flat, row-major single-channel samples. Length must equal width*height. */
     data?: number[];

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

@@ -1,105 +1,114 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
 import { ImageFrame } from "./ImageFrame.js";
-const ImagePanel = memo(function ImagePanel2({
-  // frame
-  data,
-  pixels,
-  width,
-  height,
-  maxADU,
-  colormap,
-  showValues,
-  emptyMessage,
-  // chrome
-  title,
-  loading = false,
-  error = null,
-  onRefresh,
-  refreshLabel = "Refresh",
-  refreshingLabel = "Capturing…",
-  refreshDisabled = false,
-  className = ""
-}) {
-  const { tokens } = useTheme();
-  const buttonDisabled = loading || refreshDisabled;
-  const hasFrame = Array.isArray(data) || pixels instanceof Uint8ClampedArray;
-  const frameLoading = loading && !hasFrame;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-testid": "image-panel",
-      className: classNames("zendir-image-panel", className),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacing.sm,
-        fontFamily: tokens.typography.fontFamily.primary
-      },
-      children: [
-        onRefresh && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-testid": "image-panel-refresh",
-            onClick: onRefresh,
-            disabled: buttonDisabled,
-            "aria-busy": loading ? "true" : "false",
-            style: {
-              alignSelf: "flex-start",
-              padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
-              borderRadius: tokens.borderRadius.sm,
-              border: `1px solid ${tokens.colors.border.muted}`,
-              background: buttonDisabled ? "rgba(255,255,255,0.03)" : "rgba(255,255,255,0.08)",
-              color: buttonDisabled ? tokens.colors.text.tertiary : tokens.colors.text.primary,
-              cursor: buttonDisabled ? "default" : "pointer",
-              fontSize: tokens.typography.fontSize.xs,
-              fontFamily: tokens.typography.fontFamily.primary,
-              // Make the disabled state visually consistent across browsers.
-              opacity: buttonDisabled ? 0.85 : 1
-            },
-            children: loading ? refreshingLabel : refreshLabel
-          }
-        ),
-        error && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-testid": "image-panel-error",
-            role: "alert",
-            style: {
-              color: tokens.colors.status.critical,
-              fontSize: tokens.typography.fontSize.xs,
-              background: "rgba(255, 56, 56, 0.08)",
-              border: `1px solid ${tokens.colors.status.critical}33`,
-              borderRadius: tokens.borderRadius.sm,
-              padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
-              wordBreak: "break-word"
-            },
-            children: error
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ImageFrame,
-          {
-            data,
-            pixels,
-            width,
-            height,
-            maxADU,
-            colormap,
-            showValues,
-            title,
-            loading: frameLoading,
-            emptyMessage
-          }
-        )
-      ]
-    }
-  );
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/ImagePanel.tsx
+/**
+* @zendir/ui - ImagePanel Component
+*
+* Reusable chrome around `<ImageFrame>` for sensor/CCD-style image
+* surfaces. Adds the bits every imaging panel needs but `<ImageFrame>`
+* intentionally doesn't:
+*
+*   - **Refresh button** with disabled / busy states.
+*   - **Error banner** when the upstream capture failed.
+*   - **Title strip + frame** in a single bordered card.
+*
+* Like `<ImageFrame>`, this component is **purely presentational** —
+* it knows nothing about where the data came from. Callers wire up the
+* I/O (engine, file, websocket) and feed:
+*
+*   - `data` / `pixels` / `width` / `maxADU` / `colormap` → forwarded
+*     to `<ImageFrame>` unchanged.
+*   - `onRefresh` → click handler for the button.
+*   - `loading` → toggles the button's "Capturing…" label AND the
+*     frame's skeleton state when there's no frame yet.
+*   - `error` → renders a red strip above the frame.
+*
+* The component handles the common refresh-disabled-while-loading
+* pattern internally so callers don't have to compute it.
+*
+* @example
+* ```tsx
+* <ImagePanel
+*   title="CCD capture"
+*   data={samples}
+*   width={28}
+*   maxADU={65535}
+*   loading={busy}
+*   error={err}
+*   onRefresh={capture}
+*   refreshDisabled={!ccd}
+*   emptyMessage="No frame captured yet."
+* />
+* ```
+*/
+var ImagePanel = memo(function ImagePanel({ data, pixels, width, height, maxADU, colormap, showValues, emptyMessage, title, loading = false, error = null, onRefresh, refreshLabel = "Refresh", refreshingLabel = "Capturing…", refreshDisabled = false, className = "" }) {
+	const { tokens } = useTheme();
+	const buttonDisabled = loading || refreshDisabled;
+	const hasFrame = Array.isArray(data) || pixels instanceof Uint8ClampedArray;
+	const frameLoading = loading && !hasFrame;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "image-panel",
+		className: classNames("zendir-image-panel", className),
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing.sm,
+			fontFamily: tokens.typography.fontFamily.primary
+		},
+		children: [
+			onRefresh && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-testid": "image-panel-refresh",
+				onClick: onRefresh,
+				disabled: buttonDisabled,
+				"aria-busy": loading ? "true" : "false",
+				style: {
+					alignSelf: "flex-start",
+					padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
+					borderRadius: tokens.borderRadius.sm,
+					border: `1px solid ${tokens.colors.border.muted}`,
+					background: buttonDisabled ? "rgba(255,255,255,0.03)" : "rgba(255,255,255,0.08)",
+					color: buttonDisabled ? tokens.colors.text.tertiary : tokens.colors.text.primary,
+					cursor: buttonDisabled ? "default" : "pointer",
+					fontSize: tokens.typography.fontSize.xs,
+					fontFamily: tokens.typography.fontFamily.primary,
+					opacity: buttonDisabled ? .85 : 1
+				},
+				children: loading ? refreshingLabel : refreshLabel
+			}),
+			error && /* @__PURE__ */ jsx("div", {
+				"data-testid": "image-panel-error",
+				role: "alert",
+				style: {
+					color: tokens.colors.status.critical,
+					fontSize: tokens.typography.fontSize.xs,
+					background: `${tokens.colors.status.critical}14`,
+					border: `1px solid ${tokens.colors.status.critical}33`,
+					borderRadius: tokens.borderRadius.sm,
+					padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
+					wordBreak: "break-word"
+				},
+				children: error
+			}),
+			/* @__PURE__ */ jsx(ImageFrame, {
+				data,
+				pixels,
+				width,
+				height,
+				maxADU,
+				colormap,
+				showValues,
+				title,
+				loading: frameLoading,
+				emptyMessage
+			})
+		]
+	});
 });
-export {
-  ImagePanel
-};
-//# sourceMappingURL=ImagePanel.js.map
+//#endregion
+export { ImagePanel, ImagePanel as default };
+
+//# sourceMappingURL=ImagePanel.js.map

package/dist/react/core/widgets/ImagePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePanel.js","sources":["../../../../src/react/core/widgets/ImagePanel.tsx"],"sourcesContent":["/**\n * @zendir/ui - ImagePanel Component\n *\n * Reusable chrome around `<ImageFrame>` for sensor/CCD-style image\n * surfaces. Adds the bits every imaging panel needs but `<ImageFrame>`\n * intentionally doesn't:\n *\n *   - **Refresh button** with disabled / busy states.\n *   - **Error banner** when the upstream capture failed.\n *   - **Title strip + frame** in a single bordered card.\n *\n * Like `<ImageFrame>`, this component is **purely presentational** —\n * it knows nothing about where the data came from. Callers wire up the\n * I/O (engine, file, websocket) and feed:\n *\n *   - `data` / `pixels` / `width` / `maxADU` / `colormap` → forwarded\n *     to `<ImageFrame>` unchanged.\n *   - `onRefresh` → click handler for the button.\n *   - `loading` → toggles the button's \"Capturing…\" label AND the\n *     frame's skeleton state when there's no frame yet.\n *   - `error` → renders a red strip above the frame.\n *\n * The component handles the common refresh-disabled-while-loading\n * pattern internally so callers don't have to compute it.\n *\n * @example\n * ```tsx\n * <ImagePanel\n *   title=\"CCD capture\"\n *   data={samples}\n *   width={28}\n *   maxADU={65535}\n *   loading={busy}\n *   error={err}\n *   onRefresh={capture}\n *   refreshDisabled={!ccd}\n *   emptyMessage=\"No frame captured yet.\"\n * />\n * ```\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\nimport { ImageFrame, type ImageColormap } from './ImageFrame';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface ImagePanelProps {\n  // -- Frame inputs (forwarded to <ImageFrame>) ----------------------------\n  /** Flat, row-major single-channel samples. Length must equal width*height. */\n  data?: number[];\n  /** Pre-decoded RGBA pixels — escape hatch for callers with their own buffer. */\n  pixels?: Uint8ClampedArray;\n  /** Frame width in pixels. */\n  width: number;\n  /** Frame height in pixels. Defaults to `width` (square). */\n  height?: number;\n  /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */\n  maxADU?: number;\n  /** Colormap applied to normalised intensities. Default 'cividis'. */\n  colormap?: ImageColormap;\n  /** Show the raw sample values as a grid below the image. Default false. */\n  showValues?: boolean;\n  /** Message shown when no frame is available. */\n  emptyMessage?: string;\n\n  // -- Panel chrome --------------------------------------------------------\n  /** Title rendered above the frame. */\n  title?: string;\n  /** True while a capture is in flight. Drives the button label + skeleton. */\n  loading?: boolean;\n  /** Error from the upstream capture. Rendered as a red banner above the frame. */\n  error?: string | null;\n  /** Click handler for the refresh button. Omit to hide the button entirely. */\n  onRefresh?: () => void;\n  /** Label for the idle refresh button. Default 'Refresh'. */\n  refreshLabel?: string;\n  /** Label while `loading` is true. Default 'Capturing…'. */\n  refreshingLabel?: string;\n  /**\n   * Disable the refresh button even when not loading — e.g. when the\n   * caller has no data source bound (no CCD selected). The button is\n   * always disabled while `loading` is true regardless of this prop.\n   */\n  refreshDisabled?: boolean;\n  /** Extra class name applied to the outer wrapper. */\n  className?: string;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const ImagePanel = memo(function ImagePanel({\n  // frame\n  data,\n  pixels,\n  width,\n  height,\n  maxADU,\n  colormap,\n  showValues,\n  emptyMessage,\n  // chrome\n  title,\n  loading = false,\n  error = null,\n  onRefresh,\n  refreshLabel = 'Refresh',\n  refreshingLabel = 'Capturing…',\n  refreshDisabled = false,\n  className = '',\n}: ImagePanelProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  // Button is disabled while loading OR when caller explicitly disables it\n  // (e.g. no source bound yet). Coalesced here so callers don't repeat the\n  // `loading || refreshDisabled` pattern.\n  const buttonDisabled = loading || refreshDisabled;\n\n  // Skeleton state inside ImageFrame should fire only while loading AND\n  // there's nothing to show yet — once we have data, repeat captures\n  // refresh in-place without flashing the skeleton.\n  const hasFrame = Array.isArray(data) || pixels instanceof Uint8ClampedArray;\n  const frameLoading = loading && !hasFrame;\n\n  return (\n    <div\n      data-testid=\"image-panel\"\n      className={classNames('zendir-image-panel', className)}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacing.sm,\n        fontFamily: tokens.typography.fontFamily.primary,\n      }}\n    >\n      {onRefresh && (\n        <button\n          type=\"button\"\n          data-testid=\"image-panel-refresh\"\n          onClick={onRefresh}\n          disabled={buttonDisabled}\n          aria-busy={loading ? 'true' : 'false'}\n          style={{\n            alignSelf: 'flex-start',\n            padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\n            borderRadius: tokens.borderRadius.sm,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            background: buttonDisabled\n              ? 'rgba(255,255,255,0.03)'\n              : 'rgba(255,255,255,0.08)',\n            color: buttonDisabled ? tokens.colors.text.tertiary : tokens.colors.text.primary,\n            cursor: buttonDisabled ? 'default' : 'pointer',\n            fontSize: tokens.typography.fontSize.xs,\n            fontFamily: tokens.typography.fontFamily.primary,\n            // Make the disabled state visually consistent across browsers.\n            opacity: buttonDisabled ? 0.85 : 1,\n          }}\n        >\n          {loading ? refreshingLabel : refreshLabel}\n        </button>\n      )}\n\n      {error && (\n        <div\n          data-testid=\"image-panel-error\"\n          role=\"alert\"\n          style={{\n            color: tokens.colors.status.critical,\n            fontSize: tokens.typography.fontSize.xs,\n            background: 'rgba(255, 56, 56, 0.08)',\n            border: `1px solid ${tokens.colors.status.critical}33`,\n            borderRadius: tokens.borderRadius.sm,\n            padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\n            wordBreak: 'break-word',\n          }}\n        >\n          {error}\n        </div>\n      )}\n\n      <ImageFrame\n        data={data}\n        pixels={pixels}\n        width={width}\n        height={height}\n        maxADU={maxADU}\n        colormap={colormap}\n        showValues={showValues}\n        title={title}\n        loading={frameLoading}\n        emptyMessage={emptyMessage}\n      />\n    </div>\n  );\n});\n\nexport default ImagePanel;\n"],"names":["ImagePanel"],"mappings":";;;;;AAgGO,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA;AAAA,EAEjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,YAAY;AACd,GAAwC;AACtC,QAAM,EAAE,OAAA,IAAW,SAAA;AAKnB,QAAM,iBAAiB,WAAW;AAKlC,QAAM,WAAW,MAAM,QAAQ,IAAI,KAAK,kBAAkB;AAC1D,QAAM,eAAe,WAAW,CAAC;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW,WAAW,sBAAsB,SAAS;AAAA,MACrD,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK,OAAO,QAAQ;AAAA,QACpB,YAAY,OAAO,WAAW,WAAW;AAAA,MAAA;AAAA,MAG1C,UAAA;AAAA,QAAA,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,aAAW,UAAU,SAAS;AAAA,YAC9B,OAAO;AAAA,cACL,WAAW;AAAA,cACX,SAAS,GAAG,OAAO,QAAQ,EAAE,MAAM,OAAO,QAAQ,EAAE;AAAA,cACpD,cAAc,OAAO,aAAa;AAAA,cAClC,QAAQ,aAAa,OAAO,OAAO,OAAO,KAAK;AAAA,cAC/C,YAAY,iBACR,2BACA;AAAA,cACJ,OAAO,iBAAiB,OAAO,OAAO,KAAK,WAAW,OAAO,OAAO,KAAK;AAAA,cACzE,QAAQ,iBAAiB,YAAY;AAAA,cACrC,UAAU,OAAO,WAAW,SAAS;AAAA,cACrC,YAAY,OAAO,WAAW,WAAW;AAAA;AAAA,cAEzC,SAAS,iBAAiB,OAAO;AAAA,YAAA;AAAA,YAGlC,oBAAU,kBAAkB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIhC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,MAAK;AAAA,YACL,OAAO;AAAA,cACL,OAAO,OAAO,OAAO,OAAO;AAAA,cAC5B,UAAU,OAAO,WAAW,SAAS;AAAA,cACrC,YAAY;AAAA,cACZ,QAAQ,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,cAClD,cAAc,OAAO,aAAa;AAAA,cAClC,SAAS,GAAG,OAAO,QAAQ,EAAE,MAAM,OAAO,QAAQ,EAAE;AAAA,cACpD,WAAW;AAAA,YAAA;AAAA,YAGZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"ImagePanel.js","names":[],"sources":["../../../../src/react/core/widgets/ImagePanel.tsx"],"sourcesContent":["/**\n * @zendir/ui - ImagePanel Component\n *\n * Reusable chrome around `<ImageFrame>` for sensor/CCD-style image\n * surfaces. Adds the bits every imaging panel needs but `<ImageFrame>`\n * intentionally doesn't:\n *\n *   - **Refresh button** with disabled / busy states.\n *   - **Error banner** when the upstream capture failed.\n *   - **Title strip + frame** in a single bordered card.\n *\n * Like `<ImageFrame>`, this component is **purely presentational** —\n * it knows nothing about where the data came from. Callers wire up the\n * I/O (engine, file, websocket) and feed:\n *\n *   - `data` / `pixels` / `width` / `maxADU` / `colormap` → forwarded\n *     to `<ImageFrame>` unchanged.\n *   - `onRefresh` → click handler for the button.\n *   - `loading` → toggles the button's \"Capturing…\" label AND the\n *     frame's skeleton state when there's no frame yet.\n *   - `error` → renders a red strip above the frame.\n *\n * The component handles the common refresh-disabled-while-loading\n * pattern internally so callers don't have to compute it.\n *\n * @example\n * ```tsx\n * <ImagePanel\n *   title=\"CCD capture\"\n *   data={samples}\n *   width={28}\n *   maxADU={65535}\n *   loading={busy}\n *   error={err}\n *   onRefresh={capture}\n *   refreshDisabled={!ccd}\n *   emptyMessage=\"No frame captured yet.\"\n * />\n * ```\n */\n\nimport React, { memo } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames } from \"../../utils\";\nimport { ImageFrame, type ImageColormap } from \"./ImageFrame\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface ImagePanelProps {\n  // -- Frame inputs (forwarded to <ImageFrame>) ----------------------------\n  /** Flat, row-major single-channel samples. Length must equal width*height. */\n  data?: number[];\n  /** Pre-decoded RGBA pixels — escape hatch for callers with their own buffer. */\n  pixels?: Uint8ClampedArray;\n  /** Frame width in pixels. */\n  width: number;\n  /** Frame height in pixels. Defaults to `width` (square). */\n  height?: number;\n  /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */\n  maxADU?: number;\n  /** Colormap applied to normalised intensities. Default 'cividis'. */\n  colormap?: ImageColormap;\n  /** Show the raw sample values as a grid below the image. Default false. */\n  showValues?: boolean;\n  /** Message shown when no frame is available. */\n  emptyMessage?: string;\n\n  // -- Panel chrome --------------------------------------------------------\n  /** Title rendered above the frame. */\n  title?: string;\n  /** True while a capture is in flight. Drives the button label + skeleton. */\n  loading?: boolean;\n  /** Error from the upstream capture. Rendered as a red banner above the frame. */\n  error?: string | null;\n  /** Click handler for the refresh button. Omit to hide the button entirely. */\n  onRefresh?: () => void;\n  /** Label for the idle refresh button. Default 'Refresh'. */\n  refreshLabel?: string;\n  /** Label while `loading` is true. Default 'Capturing…'. */\n  refreshingLabel?: string;\n  /**\n   * Disable the refresh button even when not loading — e.g. when the\n   * caller has no data source bound (no CCD selected). The button is\n   * always disabled while `loading` is true regardless of this prop.\n   */\n  refreshDisabled?: boolean;\n  /** Extra class name applied to the outer wrapper. */\n  className?: string;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const ImagePanel = memo(function ImagePanel({\n  // frame\n  data,\n  pixels,\n  width,\n  height,\n  maxADU,\n  colormap,\n  showValues,\n  emptyMessage,\n  // chrome\n  title,\n  loading = false,\n  error = null,\n  onRefresh,\n  refreshLabel = \"Refresh\",\n  refreshingLabel = \"Capturing…\",\n  refreshDisabled = false,\n  className = \"\",\n}: ImagePanelProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  // Button is disabled while loading OR when caller explicitly disables it\n  // (e.g. no source bound yet). Coalesced here so callers don't repeat the\n  // `loading || refreshDisabled` pattern.\n  const buttonDisabled = loading || refreshDisabled;\n\n  // Skeleton state inside ImageFrame should fire only while loading AND\n  // there's nothing to show yet — once we have data, repeat captures\n  // refresh in-place without flashing the skeleton.\n  const hasFrame = Array.isArray(data) || pixels instanceof Uint8ClampedArray;\n  const frameLoading = loading && !hasFrame;\n\n  return (\n    <div\n      data-testid=\"image-panel\"\n      className={classNames(\"zendir-image-panel\", className)}\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: tokens.spacing.sm,\n        fontFamily: tokens.typography.fontFamily.primary,\n      }}\n    >\n      {onRefresh && (\n        <button\n          type=\"button\"\n          data-testid=\"image-panel-refresh\"\n          onClick={onRefresh}\n          disabled={buttonDisabled}\n          aria-busy={loading ? \"true\" : \"false\"}\n          style={{\n            alignSelf: \"flex-start\",\n            padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\n            borderRadius: tokens.borderRadius.sm,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            background: buttonDisabled\n              ? \"rgba(255,255,255,0.03)\"\n              : \"rgba(255,255,255,0.08)\",\n            color: buttonDisabled\n              ? tokens.colors.text.tertiary\n              : tokens.colors.text.primary,\n            cursor: buttonDisabled ? \"default\" : \"pointer\",\n            fontSize: tokens.typography.fontSize.xs,\n            fontFamily: tokens.typography.fontFamily.primary,\n            // Make the disabled state visually consistent across browsers.\n            opacity: buttonDisabled ? 0.85 : 1,\n          }}\n        >\n          {loading ? refreshingLabel : refreshLabel}\n        </button>\n      )}\n\n      {error && (\n        <div\n          data-testid=\"image-panel-error\"\n          role=\"alert\"\n          style={{\n            color: tokens.colors.status.critical,\n            fontSize: tokens.typography.fontSize.xs,\n            background: `${tokens.colors.status.critical}14`,\n            border: `1px solid ${tokens.colors.status.critical}33`,\n            borderRadius: tokens.borderRadius.sm,\n            padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\n            wordBreak: \"break-word\",\n          }}\n        >\n          {error}\n        </div>\n      )}\n\n      <ImageFrame\n        data={data}\n        pixels={pixels}\n        width={width}\n        height={height}\n        maxADU={maxADU}\n        colormap={colormap}\n        showValues={showValues}\n        title={title}\n        loading={frameLoading}\n        emptyMessage={emptyMessage}\n      />\n    </div>\n  );\n});\n\nexport default ImagePanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,IAAa,aAAa,KAAK,SAAS,WAAW,EAEjD,MACA,QACA,OACA,QACA,QACA,UACA,YACA,cAEA,OACA,UAAU,OACV,QAAQ,MACR,WACA,eAAe,WACf,kBAAkB,cAClB,kBAAkB,OAClB,YAAY,MAC0B;CACtC,MAAM,EAAE,WAAW,SAAS;CAK5B,MAAM,iBAAiB,WAAW;CAKlC,MAAM,WAAW,MAAM,QAAQ,IAAI,KAAK,kBAAkB;CAC1D,MAAM,eAAe,WAAW,CAAC;CAEjC,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,WAAW,WAAW,sBAAsB,SAAS;EACrD,OAAO;GACL,SAAS;GACT,eAAe;GACf,KAAK,OAAO,QAAQ;GACpB,YAAY,OAAO,WAAW,WAAW;EAC3C;YARF;GAUG,aACC,oBAAC,UAAD;IACE,MAAK;IACL,eAAY;IACZ,SAAS;IACT,UAAU;IACV,aAAW,UAAU,SAAS;IAC9B,OAAO;KACL,WAAW;KACX,SAAS,GAAG,OAAO,QAAQ,GAAG,KAAK,OAAO,QAAQ,GAAG;KACrD,cAAc,OAAO,aAAa;KAClC,QAAQ,aAAa,OAAO,OAAO,OAAO;KAC1C,YAAY,iBACR,2BACA;KACJ,OAAO,iBACH,OAAO,OAAO,KAAK,WACnB,OAAO,OAAO,KAAK;KACvB,QAAQ,iBAAiB,YAAY;KACrC,UAAU,OAAO,WAAW,SAAS;KACrC,YAAY,OAAO,WAAW,WAAW;KAEzC,SAAS,iBAAiB,MAAO;IACnC;cAEC,UAAU,kBAAkB;GACvB,CAAA;GAGT,SACC,oBAAC,OAAD;IACE,eAAY;IACZ,MAAK;IACL,OAAO;KACL,OAAO,OAAO,OAAO,OAAO;KAC5B,UAAU,OAAO,WAAW,SAAS;KACrC,YAAY,GAAG,OAAO,OAAO,OAAO,SAAS;KAC7C,QAAQ,aAAa,OAAO,OAAO,OAAO,SAAS;KACnD,cAAc,OAAO,aAAa;KAClC,SAAS,GAAG,OAAO,QAAQ,GAAG,KAAK,OAAO,QAAQ,GAAG;KACrD,WAAW;IACb;cAEC;GACE,CAAA;GAGP,oBAAC,YAAD;IACQ;IACE;IACD;IACC;IACA;IACE;IACE;IACL;IACP,SAAS;IACK;GACf,CAAA;EACE;;AAET,CAAC"}

package/dist/react/core/widgets/LogViewer.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type LogSeverity = 'debug' | 'info' | 'warn' | 'error' | 'critical';
+export type LogSeverity = "debug" | "info" | "warn" | "error" | "critical";
 export interface LogEntry {
     /** Unique ID */
     id: string | number;
@@ -45,7 +44,7 @@ export interface LogViewerProps {
      * (falls back to wall-clock formatting if simTime is absent on an entry).
      * Default: 'time'.
      */
-    timestampFormat?: 'time' | 'datetime' | 'relative' | 'sim-elapsed';
+    timestampFormat?: "time" | "datetime" | "relative" | "sim-elapsed";
     /** Called when an entry is clicked */
     onEntryClick?: (entry: LogEntry) => void;
     /** CSS class */