@igstack/app-catalog-frontend-core 0.18.7-alpha-20260911031421 → 0.18.7-alpha-20260911144210

package/dist/esm/modules/gallery/Gallery.js

@@ -153,14 +153,14 @@ function Gallery({
           imageState === "error" ? /* @__PURE__ */ jsx("div", { className: "flex h-screen w-screen items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsx(ImageOff, { className: "size-12" }),
             /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Failed to load image" })
-          ] }) }) : /* @__PURE__ */ jsxs("div", { className: "h-full w-full overflow-auto p-2", children: [
+          ] }) }) : /* @__PURE__ */ jsxs("div", { className: "h-full w-full overflow-auto p-2 flex items-center justify-center", children: [
             imageState !== "loaded" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "size-8" }) }),
             /* @__PURE__ */ jsx(
               "img",
               {
                 src: currentImage.url,
                 alt: currentImage.alt,
-                className: "max-w-full h-auto cursor-zoom-out",
+                className: "max-w-full max-h-full h-auto cursor-zoom-out",
                 onClick: () => setFullscreen(false),
                 onLoad: () => handleImageLoad(currentIndex),
                 onError: () => handleImageError(currentIndex),

package/dist/esm/modules/gallery/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.js","sources":["../../../../src/modules/gallery/Gallery.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport useEmblaCarousel from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight, ImageOff, X } from 'lucide-react'\nimport { clamp } from 'radashi'\nimport { useHotkeys } from 'react-hotkeys-hook'\n\nimport { Button } from '~/ui/button'\nimport { Spinner } from '~/ui/spinner'\nimport { cn } from '~/lib/utils'\n\nexport interface GalleryImage {\n  url: string\n  alt: string\n}\n\nexport interface GalleryProps {\n  images: GalleryImage[]\n  initialIndex?: number\n  onIndexChange?: (index: number) => void\n  onFullscreenChange?: (isFullscreen: boolean) => void\n  className?: string\n  title?: string\n}\n\nexport function Gallery({\n  images,\n  initialIndex = 0,\n  onIndexChange,\n  onFullscreenChange,\n  className,\n  title,\n}: GalleryProps) {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    loop: false,\n    align: 'center',\n  })\n  // Use lazy initialization for clamp() call\n  const [currentIndex, setCurrentIndex] = useState(() =>\n    clamp(initialIndex, 0, images.length - 1),\n  )\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const [imageStates, setImageStates] = useState<\n    Record<number, 'loading' | 'loaded' | 'error'>\n  >(() => Object.fromEntries(images.map((_, i) => [i, 'loading'])))\n\n  // Reset image states when images array changes\n  useEffect(() => {\n    setImageStates(Object.fromEntries(images.map((_, i) => [i, 'loading'])))\n  }, [images])\n\n  // Stabilize onFullscreenChange callback with ref\n  const onFullscreenChangeRef = useRef(onFullscreenChange)\n  useEffect(() => {\n    onFullscreenChangeRef.current = onFullscreenChange\n  }, [onFullscreenChange])\n\n  const setFullscreen = useCallback((value: boolean) => {\n    setIsFullscreen(value)\n    onFullscreenChangeRef.current?.(value)\n  }, [])\n\n  // Stabilize onIndexChange callback with ref\n  const onIndexChangeRef = useRef(onIndexChange)\n  useEffect(() => {\n    onIndexChangeRef.current = onIndexChange\n  }, [onIndexChange])\n\n  const scrollPrev = useCallback(() => {\n    if (emblaApi) emblaApi.scrollPrev()\n  }, [emblaApi])\n\n  const scrollNext = useCallback(() => {\n    if (emblaApi) emblaApi.scrollNext()\n  }, [emblaApi])\n\n  // Sync current index with embla using event handler\n  const onSelect = useCallback(() => {\n    if (!emblaApi) return\n    const index = emblaApi.selectedScrollSnap()\n    setCurrentIndex(index)\n    onIndexChangeRef.current?.(index)\n  }, [emblaApi])\n\n  // Subscribe to embla select events and initialize\n  useEffect(() => {\n    if (!emblaApi) return\n\n    // Initialize current index\n    onSelect()\n\n    // Subscribe to future changes\n    emblaApi.on('select', onSelect)\n    return () => {\n      emblaApi.off('select', onSelect)\n    }\n  }, [emblaApi, onSelect])\n\n  // Scroll to initial index on mount only\n  useEffect(() => {\n    if (emblaApi && typeof initialIndex === 'number') {\n      emblaApi.scrollTo(initialIndex)\n    }\n  }, [emblaApi, initialIndex])\n\n  // Keyboard navigation\n  useHotkeys(\n    'left',\n    (e) => {\n      e.preventDefault()\n      scrollPrev()\n    },\n    {\n      enabled: images.length > 1,\n      enableOnFormTags: false,\n      preventDefault: true,\n    },\n    [scrollPrev, images.length],\n  )\n  useHotkeys(\n    'right',\n    (e) => {\n      e.preventDefault()\n      scrollNext()\n    },\n    {\n      enabled: images.length > 1,\n      enableOnFormTags: false,\n      preventDefault: true,\n    },\n    [scrollNext, images.length],\n  )\n  // Intercept Escape in fullscreen — must stopPropagation before Radix Dialog sees it\n  useEffect(() => {\n    if (!isFullscreen) return\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation()\n        e.preventDefault()\n        setFullscreen(false)\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape, true)\n    return () => {\n      document.removeEventListener('keydown', handleEscape, true)\n    }\n  }, [isFullscreen, setFullscreen])\n\n  // Mouse wheel navigation with debouncing\n  useEffect(() => {\n    if (!emblaApi || images.length <= 1) return\n\n    const emblaNode = emblaApi.rootNode()\n\n    let isScrolling = false\n    let scrollTimeout: NodeJS.Timeout\n\n    const handleWheel = (event: WheelEvent) => {\n      // Prevent page scroll when wheeling over gallery\n      event.preventDefault()\n\n      // Skip if already scrolling (debounce)\n      if (isScrolling) return\n\n      // Determine scroll direction\n      const deltaY = event.deltaY\n      const deltaX = event.deltaX\n\n      // Use vertical scroll primarily, fall back to horizontal\n      const delta = Math.abs(deltaY) > Math.abs(deltaX) ? deltaY : deltaX\n\n      if (delta > 0) {\n        // Scroll down/right -> next slide\n        scrollNext()\n      } else if (delta < 0) {\n        // Scroll up/left -> previous slide\n        scrollPrev()\n      }\n\n      // Set cooldown period\n      isScrolling = true\n      clearTimeout(scrollTimeout)\n      scrollTimeout = setTimeout(() => {\n        isScrolling = false\n      }, 300) // 300ms cooldown\n    }\n\n    emblaNode.addEventListener('wheel', handleWheel, { passive: false })\n\n    return () => {\n      emblaNode.removeEventListener('wheel', handleWheel)\n      clearTimeout(scrollTimeout)\n    }\n  }, [emblaApi, scrollNext, scrollPrev, images.length])\n\n  const currentImage = images[currentIndex]\n\n  const handleImageLoad = (index: number) => {\n    setImageStates((prev) => ({ ...prev, [index]: 'loaded' }))\n  }\n\n  const handleImageError = (index: number) => {\n    setImageStates((prev) => ({ ...prev, [index]: 'error' }))\n  }\n\n  // Fullscreen mode\n  if (isFullscreen && currentImage) {\n    const imageState = imageStates[currentIndex]\n    return (\n      <div\n        className=\"fixed inset-0 z-50 bg-background\"\n        role=\"dialog\"\n        aria-label=\"Fullscreen view\"\n      >\n        {imageState === 'error' ? (\n          <div className=\"flex h-screen w-screen items-center justify-center\">\n            <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n              <ImageOff className=\"size-12\" />\n              <p className=\"text-sm\">Failed to load image</p>\n            </div>\n          </div>\n        ) : (\n          <div className=\"h-full w-full overflow-auto p-2\">\n            {imageState !== 'loaded' && (\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <Spinner className=\"size-8\" />\n              </div>\n            )}\n            <img\n              src={currentImage.url}\n              alt={currentImage.alt}\n              className=\"max-w-full h-auto cursor-zoom-out\"\n              onClick={() => setFullscreen(false)}\n              onLoad={() => handleImageLoad(currentIndex)}\n              onError={() => handleImageError(currentIndex)}\n              style={{ opacity: imageState === 'loaded' ? 1 : 0 }}\n              role=\"button\"\n              aria-label=\"Zoom out\"\n            />\n          </div>\n        )}\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => setFullscreen(false)}\n          className=\"absolute top-4 right-4 z-10\"\n          aria-label=\"Exit fullscreen\"\n        >\n          <X className=\"size-4\" />\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex h-full flex-col min-h-0', className)}>\n      {/* Title Header */}\n      {title && (\n        <div className=\"px-6 py-4\">\n          <h2 className=\"text-lg font-semibold\">{title}</h2>\n        </div>\n      )}\n\n      {/* Carousel Viewport with Peek Effect */}\n      <div className=\"relative flex-1 min-h-0 overflow-hidden px-4\">\n        <div ref={emblaRef} className=\"h-full overflow-hidden\">\n          <div className=\"flex h-full gap-4\">\n            {images.map((image, index) => {\n              const imageState = imageStates[index]\n              // Use 100% width for single image, 85% for multiple (peek effect)\n              const slideWidth = images.length === 1 ? '100%' : '85%'\n              return (\n                <div\n                  key={image.url}\n                  className={cn(\n                    'relative flex min-w-0 items-center justify-center transition-opacity duration-300 h-full',\n                    index !== currentIndex && 'opacity-40',\n                  )}\n                  style={{ flexBasis: slideWidth, flexShrink: 0, flexGrow: 0 }}\n                >\n                  {imageState === 'error' ? (\n                    <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n                      <ImageOff className=\"size-12\" />\n                      <p className=\"text-xs\">Failed to load</p>\n                    </div>\n                  ) : (\n                    <>\n                      {imageState !== 'loaded' && (\n                        <div className=\"absolute inset-0 flex items-center justify-center\">\n                          <Spinner className=\"size-8\" />\n                        </div>\n                      )}\n                      <img\n                        src={image.url}\n                        alt={image.alt}\n                        className=\"max-w-full max-h-full w-auto h-auto object-contain cursor-pointer border border-border/30 rounded\"\n                        onClick={() => {\n                          if (index !== currentIndex) {\n                            emblaApi?.scrollTo(index)\n                          } else {\n                            setFullscreen(true)\n                          }\n                        }}\n                        onLoad={() => handleImageLoad(index)}\n                        onError={() => handleImageError(index)}\n                        style={{ opacity: imageState === 'loaded' ? 1 : 0 }}\n                        role=\"button\"\n                        aria-label={`Navigate to ${image.alt}`}\n                      />\n                    </>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n\n      {/* Bottom Controls */}\n      <div className=\"flex items-center justify-center gap-4 py-4\">\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={scrollPrev}\n          disabled={images.length <= 1}\n          aria-label=\"Previous screenshot\"\n          className=\"h-12 w-12\"\n        >\n          <ChevronLeft className=\"h-12 w-12\" />\n        </Button>\n\n        <div className=\"text-sm text-muted-foreground\" aria-live=\"polite\">\n          {currentIndex + 1} / {images.length}\n        </div>\n\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={scrollNext}\n          disabled={images.length <= 1}\n          aria-label=\"Next screenshot\"\n          className=\"h-12 w-12\"\n        >\n          <ChevronRight className=\"h-12 w-12\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAwBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,CAAC,UAAU,QAAQ,IAAI,iBAAiB;AAAA,IAC5C,MAAM;AAAA,IACN,OAAO;AAAA,EAAA,CACR;AAED,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IAAS,MAC/C,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC;AAAA,EAAA;AAE1C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,aAAa,cAAc,IAAI,SAEpC,MAAM,OAAO,YAAY,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;AAGhE,YAAU,MAAM;AACd,mBAAe,OAAO,YAAY,OAAO,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;AAAA,EACzE,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,wBAAwB,OAAO,kBAAkB;AACvD,YAAU,MAAM;AACd,0BAAsB,UAAU;AAAA,EAClC,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAgB,YAAY,CAAC,UAAmB;;AACpD,oBAAgB,KAAK;AACrB,gCAAsB,YAAtB,+CAAgC;AAAA,EAClC,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,OAAO,aAAa;AAC7C,YAAU,MAAM;AACd,qBAAiB,UAAU;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,mBAAmB,WAAA;AAAA,EACzB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,mBAAmB,WAAA;AAAA,EACzB,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,WAAW,YAAY,MAAM;;AACjC,QAAI,CAAC,SAAU;AACf,UAAM,QAAQ,SAAS,mBAAA;AACvB,oBAAgB,KAAK;AACrB,2BAAiB,YAAjB,0CAA2B;AAAA,EAC7B,GAAG,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AAGf,aAAA;AAGA,aAAS,GAAG,UAAU,QAAQ;AAC9B,WAAO,MAAM;AACX,eAAS,IAAI,UAAU,QAAQ;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAGvB,YAAU,MAAM;AACd,QAAI,YAAY,OAAO,iBAAiB,UAAU;AAChD,eAAS,SAAS,YAAY;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,UAAU,YAAY,CAAC;AAG3B;AAAA,IACE;AAAA,IACA,CAAC,MAAM;AACL,QAAE,eAAA;AACF,iBAAA;AAAA,IACF;AAAA,IACA;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,MACzB,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,IAAA;AAAA,IAElB,CAAC,YAAY,OAAO,MAAM;AAAA,EAAA;AAE5B;AAAA,IACE;AAAA,IACA,CAAC,MAAM;AACL,QAAE,eAAA;AACF,iBAAA;AAAA,IACF;AAAA,IACA;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,MACzB,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,IAAA;AAAA,IAElB,CAAC,YAAY,OAAO,MAAM;AAAA,EAAA;AAG5B,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AAEnB,UAAM,eAAe,CAAC,MAAqB;AACzC,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,gBAAA;AACF,UAAE,eAAA;AACF,sBAAc,KAAK;AAAA,MACrB;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,cAAc,IAAI;AACvD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,cAAc,IAAI;AAAA,IAC5D;AAAA,EACF,GAAG,CAAC,cAAc,aAAa,CAAC;AAGhC,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,OAAO,UAAU,EAAG;AAErC,UAAM,YAAY,SAAS,SAAA;AAE3B,QAAI,cAAc;AAClB,QAAI;AAEJ,UAAM,cAAc,CAAC,UAAsB;AAEzC,YAAM,eAAA;AAGN,UAAI,YAAa;AAGjB,YAAM,SAAS,MAAM;AACrB,YAAM,SAAS,MAAM;AAGrB,YAAM,QAAQ,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,IAAI,SAAS;AAE7D,UAAI,QAAQ,GAAG;AAEb,mBAAA;AAAA,MACF,WAAW,QAAQ,GAAG;AAEpB,mBAAA;AAAA,MACF;AAGA,oBAAc;AACd,mBAAa,aAAa;AAC1B,sBAAgB,WAAW,MAAM;AAC/B,sBAAc;AAAA,MAChB,GAAG,GAAG;AAAA,IACR;AAEA,cAAU,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO;AAEnE,WAAO,MAAM;AACX,gBAAU,oBAAoB,SAAS,WAAW;AAClD,mBAAa,aAAa;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,UAAU,YAAY,YAAY,OAAO,MAAM,CAAC;AAEpD,QAAM,eAAe,OAAO,YAAY;AAExC,QAAM,kBAAkB,CAAC,UAAkB;AACzC,mBAAe,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,SAAA,EAAW;AAAA,EAC3D;AAEA,QAAM,mBAAmB,CAAC,UAAkB;AAC1C,mBAAe,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,QAAA,EAAU;AAAA,EAC1D;AAGA,MAAI,gBAAgB,cAAc;AAChC,UAAM,aAAa,YAAY,YAAY;AAC3C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QAEV,UAAA;AAAA,UAAA,eAAe,8BACb,OAAA,EAAI,WAAU,sDACb,UAAA,qBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAS,WAAU,UAAA,CAAU;AAAA,YAC9B,oBAAC,KAAA,EAAE,WAAU,WAAU,UAAA,uBAAA,CAAoB;AAAA,UAAA,EAAA,CAC7C,EAAA,CACF,IAEA,qBAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,YAAA,eAAe,gCACb,OAAA,EAAI,WAAU,qDACb,UAAA,oBAAC,SAAA,EAAQ,WAAU,SAAA,CAAS,EAAA,CAC9B;AAAA,YAEF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,aAAa;AAAA,gBAClB,KAAK,aAAa;AAAA,gBAClB,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,QAAQ,MAAM,gBAAgB,YAAY;AAAA,gBAC1C,SAAS,MAAM,iBAAiB,YAAY;AAAA,gBAC5C,OAAO,EAAE,SAAS,eAAe,WAAW,IAAI,EAAA;AAAA,gBAChD,MAAK;AAAA,gBACL,cAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,GACF;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM,cAAc,KAAK;AAAA,cAClC,WAAU;AAAA,cACV,cAAW;AAAA,cAEX,UAAA,oBAAC,GAAA,EAAE,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACxB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,8BACG,OAAA,EAAI,WAAW,GAAG,gCAAgC,SAAS,GAEzD,UAAA;AAAA,IAAA,SACC,oBAAC,SAAI,WAAU,aACb,8BAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,MAAA,CAAM,EAAA,CAC/C;AAAA,wBAID,OAAA,EAAI,WAAU,gDACb,UAAA,oBAAC,OAAA,EAAI,KAAK,UAAU,WAAU,0BAC5B,UAAA,oBAAC,SAAI,WAAU,qBACZ,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,YAAM,aAAa,YAAY,KAAK;AAEpC,YAAM,aAAa,OAAO,WAAW,IAAI,SAAS;AAClD,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW;AAAA,YACT;AAAA,YACA,UAAU,gBAAgB;AAAA,UAAA;AAAA,UAE5B,OAAO,EAAE,WAAW,YAAY,YAAY,GAAG,UAAU,EAAA;AAAA,UAExD,UAAA,eAAe,UACd,qBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAS,WAAU,UAAA,CAAU;AAAA,YAC9B,oBAAC,KAAA,EAAE,WAAU,WAAU,UAAA,iBAAA,CAAc;AAAA,UAAA,EAAA,CACvC,IAEA,qBAAA,UAAA,EACG,UAAA;AAAA,YAAA,eAAe,gCACb,OAAA,EAAI,WAAU,qDACb,UAAA,oBAAC,SAAA,EAAQ,WAAU,SAAA,CAAS,EAAA,CAC9B;AAAA,YAEF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,MAAM;AAAA,gBACX,KAAK,MAAM;AAAA,gBACX,WAAU;AAAA,gBACV,SAAS,MAAM;AACb,sBAAI,UAAU,cAAc;AAC1B,yDAAU,SAAS;AAAA,kBACrB,OAAO;AACL,kCAAc,IAAI;AAAA,kBACpB;AAAA,gBACF;AAAA,gBACA,QAAQ,MAAM,gBAAgB,KAAK;AAAA,gBACnC,SAAS,MAAM,iBAAiB,KAAK;AAAA,gBACrC,OAAO,EAAE,SAAS,eAAe,WAAW,IAAI,EAAA;AAAA,gBAChD,MAAK;AAAA,gBACL,cAAY,eAAe,MAAM,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UACtC,EAAA,CACF;AAAA,QAAA;AAAA,QApCG,MAAM;AAAA,MAAA;AAAA,IAwCjB,CAAC,EAAA,CACH,EAAA,CACF,GACF;AAAA,IAGA,qBAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,OAAO,UAAU;AAAA,UAC3B,cAAW;AAAA,UACX,WAAU;AAAA,UAEV,UAAA,oBAAC,aAAA,EAAY,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAGrC,qBAAC,OAAA,EAAI,WAAU,iCAAgC,aAAU,UACtD,UAAA;AAAA,QAAA,eAAe;AAAA,QAAE;AAAA,QAAI,OAAO;AAAA,MAAA,GAC/B;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,OAAO,UAAU;AAAA,UAC3B,cAAW;AAAA,UACX,WAAU;AAAA,UAEV,UAAA,oBAAC,cAAA,EAAa,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACtC,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Gallery.js","sources":["../../../../src/modules/gallery/Gallery.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport useEmblaCarousel from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight, ImageOff, X } from 'lucide-react'\nimport { clamp } from 'radashi'\nimport { useHotkeys } from 'react-hotkeys-hook'\n\nimport { Button } from '~/ui/button'\nimport { Spinner } from '~/ui/spinner'\nimport { cn } from '~/lib/utils'\n\nexport interface GalleryImage {\n  url: string\n  alt: string\n}\n\nexport interface GalleryProps {\n  images: GalleryImage[]\n  initialIndex?: number\n  onIndexChange?: (index: number) => void\n  onFullscreenChange?: (isFullscreen: boolean) => void\n  className?: string\n  title?: string\n}\n\nexport function Gallery({\n  images,\n  initialIndex = 0,\n  onIndexChange,\n  onFullscreenChange,\n  className,\n  title,\n}: GalleryProps) {\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    loop: false,\n    align: 'center',\n  })\n  // Use lazy initialization for clamp() call\n  const [currentIndex, setCurrentIndex] = useState(() =>\n    clamp(initialIndex, 0, images.length - 1),\n  )\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const [imageStates, setImageStates] = useState<\n    Record<number, 'loading' | 'loaded' | 'error'>\n  >(() => Object.fromEntries(images.map((_, i) => [i, 'loading'])))\n\n  // Reset image states when images array changes\n  useEffect(() => {\n    setImageStates(Object.fromEntries(images.map((_, i) => [i, 'loading'])))\n  }, [images])\n\n  // Stabilize onFullscreenChange callback with ref\n  const onFullscreenChangeRef = useRef(onFullscreenChange)\n  useEffect(() => {\n    onFullscreenChangeRef.current = onFullscreenChange\n  }, [onFullscreenChange])\n\n  const setFullscreen = useCallback((value: boolean) => {\n    setIsFullscreen(value)\n    onFullscreenChangeRef.current?.(value)\n  }, [])\n\n  // Stabilize onIndexChange callback with ref\n  const onIndexChangeRef = useRef(onIndexChange)\n  useEffect(() => {\n    onIndexChangeRef.current = onIndexChange\n  }, [onIndexChange])\n\n  const scrollPrev = useCallback(() => {\n    if (emblaApi) emblaApi.scrollPrev()\n  }, [emblaApi])\n\n  const scrollNext = useCallback(() => {\n    if (emblaApi) emblaApi.scrollNext()\n  }, [emblaApi])\n\n  // Sync current index with embla using event handler\n  const onSelect = useCallback(() => {\n    if (!emblaApi) return\n    const index = emblaApi.selectedScrollSnap()\n    setCurrentIndex(index)\n    onIndexChangeRef.current?.(index)\n  }, [emblaApi])\n\n  // Subscribe to embla select events and initialize\n  useEffect(() => {\n    if (!emblaApi) return\n\n    // Initialize current index\n    onSelect()\n\n    // Subscribe to future changes\n    emblaApi.on('select', onSelect)\n    return () => {\n      emblaApi.off('select', onSelect)\n    }\n  }, [emblaApi, onSelect])\n\n  // Scroll to initial index on mount only\n  useEffect(() => {\n    if (emblaApi && typeof initialIndex === 'number') {\n      emblaApi.scrollTo(initialIndex)\n    }\n  }, [emblaApi, initialIndex])\n\n  // Keyboard navigation\n  useHotkeys(\n    'left',\n    (e) => {\n      e.preventDefault()\n      scrollPrev()\n    },\n    {\n      enabled: images.length > 1,\n      enableOnFormTags: false,\n      preventDefault: true,\n    },\n    [scrollPrev, images.length],\n  )\n  useHotkeys(\n    'right',\n    (e) => {\n      e.preventDefault()\n      scrollNext()\n    },\n    {\n      enabled: images.length > 1,\n      enableOnFormTags: false,\n      preventDefault: true,\n    },\n    [scrollNext, images.length],\n  )\n  // Intercept Escape in fullscreen — must stopPropagation before Radix Dialog sees it\n  useEffect(() => {\n    if (!isFullscreen) return\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation()\n        e.preventDefault()\n        setFullscreen(false)\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape, true)\n    return () => {\n      document.removeEventListener('keydown', handleEscape, true)\n    }\n  }, [isFullscreen, setFullscreen])\n\n  // Mouse wheel navigation with debouncing\n  useEffect(() => {\n    if (!emblaApi || images.length <= 1) return\n\n    const emblaNode = emblaApi.rootNode()\n\n    let isScrolling = false\n    let scrollTimeout: NodeJS.Timeout\n\n    const handleWheel = (event: WheelEvent) => {\n      // Prevent page scroll when wheeling over gallery\n      event.preventDefault()\n\n      // Skip if already scrolling (debounce)\n      if (isScrolling) return\n\n      // Determine scroll direction\n      const deltaY = event.deltaY\n      const deltaX = event.deltaX\n\n      // Use vertical scroll primarily, fall back to horizontal\n      const delta = Math.abs(deltaY) > Math.abs(deltaX) ? deltaY : deltaX\n\n      if (delta > 0) {\n        // Scroll down/right -> next slide\n        scrollNext()\n      } else if (delta < 0) {\n        // Scroll up/left -> previous slide\n        scrollPrev()\n      }\n\n      // Set cooldown period\n      isScrolling = true\n      clearTimeout(scrollTimeout)\n      scrollTimeout = setTimeout(() => {\n        isScrolling = false\n      }, 300) // 300ms cooldown\n    }\n\n    emblaNode.addEventListener('wheel', handleWheel, { passive: false })\n\n    return () => {\n      emblaNode.removeEventListener('wheel', handleWheel)\n      clearTimeout(scrollTimeout)\n    }\n  }, [emblaApi, scrollNext, scrollPrev, images.length])\n\n  const currentImage = images[currentIndex]\n\n  const handleImageLoad = (index: number) => {\n    setImageStates((prev) => ({ ...prev, [index]: 'loaded' }))\n  }\n\n  const handleImageError = (index: number) => {\n    setImageStates((prev) => ({ ...prev, [index]: 'error' }))\n  }\n\n  // Fullscreen mode\n  if (isFullscreen && currentImage) {\n    const imageState = imageStates[currentIndex]\n    return (\n      <div\n        className=\"fixed inset-0 z-50 bg-background\"\n        role=\"dialog\"\n        aria-label=\"Fullscreen view\"\n      >\n        {imageState === 'error' ? (\n          <div className=\"flex h-screen w-screen items-center justify-center\">\n            <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n              <ImageOff className=\"size-12\" />\n              <p className=\"text-sm\">Failed to load image</p>\n            </div>\n          </div>\n        ) : (\n          <div className=\"h-full w-full overflow-auto p-2 flex items-center justify-center\">\n            {imageState !== 'loaded' && (\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <Spinner className=\"size-8\" />\n              </div>\n            )}\n            <img\n              src={currentImage.url}\n              alt={currentImage.alt}\n              className=\"max-w-full max-h-full h-auto cursor-zoom-out\"\n              onClick={() => setFullscreen(false)}\n              onLoad={() => handleImageLoad(currentIndex)}\n              onError={() => handleImageError(currentIndex)}\n              style={{ opacity: imageState === 'loaded' ? 1 : 0 }}\n              role=\"button\"\n              aria-label=\"Zoom out\"\n            />\n          </div>\n        )}\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => setFullscreen(false)}\n          className=\"absolute top-4 right-4 z-10\"\n          aria-label=\"Exit fullscreen\"\n        >\n          <X className=\"size-4\" />\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex h-full flex-col min-h-0', className)}>\n      {/* Title Header */}\n      {title && (\n        <div className=\"px-6 py-4\">\n          <h2 className=\"text-lg font-semibold\">{title}</h2>\n        </div>\n      )}\n\n      {/* Carousel Viewport with Peek Effect */}\n      <div className=\"relative flex-1 min-h-0 overflow-hidden px-4\">\n        <div ref={emblaRef} className=\"h-full overflow-hidden\">\n          <div className=\"flex h-full gap-4\">\n            {images.map((image, index) => {\n              const imageState = imageStates[index]\n              // Use 100% width for single image, 85% for multiple (peek effect)\n              const slideWidth = images.length === 1 ? '100%' : '85%'\n              return (\n                <div\n                  key={image.url}\n                  className={cn(\n                    'relative flex min-w-0 items-center justify-center transition-opacity duration-300 h-full',\n                    index !== currentIndex && 'opacity-40',\n                  )}\n                  style={{ flexBasis: slideWidth, flexShrink: 0, flexGrow: 0 }}\n                >\n                  {imageState === 'error' ? (\n                    <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n                      <ImageOff className=\"size-12\" />\n                      <p className=\"text-xs\">Failed to load</p>\n                    </div>\n                  ) : (\n                    <>\n                      {imageState !== 'loaded' && (\n                        <div className=\"absolute inset-0 flex items-center justify-center\">\n                          <Spinner className=\"size-8\" />\n                        </div>\n                      )}\n                      <img\n                        src={image.url}\n                        alt={image.alt}\n                        className=\"max-w-full max-h-full w-auto h-auto object-contain cursor-pointer border border-border/30 rounded\"\n                        onClick={() => {\n                          if (index !== currentIndex) {\n                            emblaApi?.scrollTo(index)\n                          } else {\n                            setFullscreen(true)\n                          }\n                        }}\n                        onLoad={() => handleImageLoad(index)}\n                        onError={() => handleImageError(index)}\n                        style={{ opacity: imageState === 'loaded' ? 1 : 0 }}\n                        role=\"button\"\n                        aria-label={`Navigate to ${image.alt}`}\n                      />\n                    </>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n\n      {/* Bottom Controls */}\n      <div className=\"flex items-center justify-center gap-4 py-4\">\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={scrollPrev}\n          disabled={images.length <= 1}\n          aria-label=\"Previous screenshot\"\n          className=\"h-12 w-12\"\n        >\n          <ChevronLeft className=\"h-12 w-12\" />\n        </Button>\n\n        <div className=\"text-sm text-muted-foreground\" aria-live=\"polite\">\n          {currentIndex + 1} / {images.length}\n        </div>\n\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={scrollNext}\n          disabled={images.length <= 1}\n          aria-label=\"Next screenshot\"\n          className=\"h-12 w-12\"\n        >\n          <ChevronRight className=\"h-12 w-12\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.18.7-alpha-20260911031421",
+  "version": "0.18.7-alpha-20260911144210",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -132,8 +132,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.18.7-alpha-20260911031421",
-    "@igstack/app-catalog-shared-core": "0.18.7-alpha-20260911031421"
+    "@igstack/app-catalog-backend-core": "0.18.7-alpha-20260911144210",
+    "@igstack/app-catalog-shared-core": "0.18.7-alpha-20260911144210"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -142,7 +142,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "485ab901f46a7448acb1784d706661aecfb4db1b",
+  "gitHead": "a748b1f6979d3ddaf9a21d0591a8ec3b5bdffd53",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/modules/gallery/Gallery.tsx

@@ -221,7 +221,7 @@ export function Gallery({
             </div>
           </div>
         ) : (
-          <div className="h-full w-full overflow-auto p-2">
+          <div className="h-full w-full overflow-auto p-2 flex items-center justify-center">
             {imageState !== 'loaded' && (
               <div className="absolute inset-0 flex items-center justify-center">
                 <Spinner className="size-8" />
@@ -230,7 +230,7 @@ export function Gallery({
             <img
               src={currentImage.url}
               alt={currentImage.alt}
-              className="max-w-full h-auto cursor-zoom-out"
+              className="max-w-full max-h-full h-auto cursor-zoom-out"
               onClick={() => setFullscreen(false)}
               onLoad={() => handleImageLoad(currentIndex)}
               onError={() => handleImageError(currentIndex)}