@igstack/app-catalog-frontend-core 0.7.0 → 0.8.0

package/dist/esm/modules/appCatalog/ui/pages/ServiceDesksPage.js

@@ -36,19 +36,23 @@ function ServiceDesksPage() {
       ] }) }),
       /* @__PURE__ */ jsx(TableBody, { children: desks.map((desk) => {
         const url = desk.config.url;
+        const description = desk.config.description;
         return /* @__PURE__ */ jsxs(TableRow, { children: [
-          /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: desk.displayName }),
+          /* @__PURE__ */ jsxs(TableCell, { className: "font-medium align-top", children: [
+            /* @__PURE__ */ jsx("span", { "data-testid": "service-desk-name", children: desk.displayName }),
+            description && /* @__PURE__ */ jsx("span", { className: "block text-xs font-normal text-muted-foreground", children: description })
+          ] }),
           /* @__PURE__ */ jsx(TableCell, { children: url ? /* @__PURE__ */ jsxs(
             "a",
             {
               href: url,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "inline-flex items-center gap-1 text-primary hover:underline",
+              className: "inline-flex items-center gap-1 text-primary hover:underline break-all",
               title: url,
               children: [
-                "Open",
-                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+                url.replace(/^https?:\/\//, ""),
+                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
               ]
             }
           ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }) })

package/dist/esm/modules/appCatalog/ui/pages/ServiceDesksPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceDesksPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/ServiceDesksPage.tsx"],"sourcesContent":["import { ExternalLink } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { InputGroup, InputGroupInput } from '~/ui/input-group'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\n\n/**\n * Service Desks view (#9): a searchable table of all service-desk approval\n * methods (type === 'service'), each with a link that opens its portal in a new\n * tab. Data rides in on the existing app-catalog query (context.approvalMethods).\n */\nexport function ServiceDesksPage() {\n  const { approvalMethods } = useAppCatalogContext()\n  const [search, setSearch] = useState('')\n\n  const desks = useMemo(() => {\n    const services = approvalMethods.filter((m) => m.type === 'service')\n    const q = search.trim().toLowerCase()\n    const filtered = q\n      ? services.filter((m) => m.displayName.toLowerCase().includes(q))\n      : services\n    return [...filtered].sort((a, b) =>\n      a.displayName.localeCompare(b.displayName),\n    )\n  }, [approvalMethods, search])\n\n  return (\n    <div className=\"flex flex-col flex-1 min-h-0 gap-4\">\n      <InputGroup className=\"max-w-sm\">\n        <InputGroupInput\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          placeholder=\"Search service desks by name…\"\n          aria-label=\"Search service desks\"\n        />\n      </InputGroup>\n\n      <div className=\"flex-1 min-h-0 overflow-y-auto\">\n        {desks.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">\n            No service desks found{search && ` for \"${search}\"`}.\n          </p>\n        ) : (\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Service Desk</TableHead>\n                <TableHead>Link</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {desks.map((desk) => {\n                const url = desk.config.url\n                return (\n                  <TableRow key={desk.slug}>\n                    <TableCell className=\"font-medium\">\n                      {desk.displayName}\n                    </TableCell>\n                    <TableCell>\n                      {url ? (\n                        <a\n                          href={url}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className=\"inline-flex items-center gap-1 text-primary hover:underline\"\n                          title={url}\n                        >\n                          Open\n                          <ExternalLink className=\"size-3\" />\n                        </a>\n                      ) : (\n                        <span className=\"text-muted-foreground\">—</span>\n                      )}\n                    </TableCell>\n                  </TableRow>\n                )\n              })}\n            </TableBody>\n          </Table>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAkBO,SAAS,mBAAmB;AACjC,QAAM,EAAE,gBAAA,IAAoB,qBAAA;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,WAAW,gBAAgB,OAAO,CAAC,MAAM,EAAE,SAAS,SAAS;AACnE,UAAM,IAAI,OAAO,KAAA,EAAO,YAAA;AACxB,UAAM,WAAW,IACb,SAAS,OAAO,CAAC,MAAM,EAAE,YAAY,YAAA,EAAc,SAAS,CAAC,CAAC,IAC9D;AACJ,WAAO,CAAC,GAAG,QAAQ,EAAE;AAAA,MAAK,CAAC,GAAG,MAC5B,EAAE,YAAY,cAAc,EAAE,WAAW;AAAA,IAAA;AAAA,EAE7C,GAAG,CAAC,iBAAiB,MAAM,CAAC;AAE5B,SACE,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,WAAU,YACpB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,QACzC,aAAY;AAAA,QACZ,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEA,oBAAC,OAAA,EAAI,WAAU,kCACZ,UAAA,MAAM,WAAW,IAChB,qBAAC,KAAA,EAAE,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACpB,UAAU,SAAS,MAAM;AAAA,MAAI;AAAA,IAAA,EAAA,CACtD,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,aAAA,EACC,+BAAC,UAAA,EACC,UAAA;AAAA,QAAA,oBAAC,aAAU,UAAA,eAAA,CAAY;AAAA,QACvB,oBAAC,aAAU,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,CACjB,EAAA,CACF;AAAA,MACA,oBAAC,WAAA,EACE,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,cAAM,MAAM,KAAK,OAAO;AACxB,oCACG,UAAA,EACC,UAAA;AAAA,UAAA,oBAAC,WAAA,EAAU,WAAU,eAClB,UAAA,KAAK,aACR;AAAA,UACA,oBAAC,aACE,UAAA,MACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,KAAI;AAAA,cACJ,WAAU;AAAA,cACV,OAAO;AAAA,cACR,UAAA;AAAA,gBAAA;AAAA,gBAEC,oBAAC,cAAA,EAAa,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAGnC,oBAAC,QAAA,EAAK,WAAU,yBAAwB,eAAC,EAAA,CAE7C;AAAA,QAAA,EAAA,GAnBa,KAAK,IAoBpB;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ServiceDesksPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/ServiceDesksPage.tsx"],"sourcesContent":["import { ExternalLink } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { InputGroup, InputGroupInput } from '~/ui/input-group'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\n\n/**\n * Service Desks view (#9): a searchable table of all service-desk approval\n * methods (type === 'service'), each with a link that opens its portal in a new\n * tab. Data rides in on the existing app-catalog query (context.approvalMethods).\n */\nexport function ServiceDesksPage() {\n  const { approvalMethods } = useAppCatalogContext()\n  const [search, setSearch] = useState('')\n\n  const desks = useMemo(() => {\n    const services = approvalMethods.filter((m) => m.type === 'service')\n    const q = search.trim().toLowerCase()\n    const filtered = q\n      ? services.filter((m) => m.displayName.toLowerCase().includes(q))\n      : services\n    return [...filtered].sort((a, b) =>\n      a.displayName.localeCompare(b.displayName),\n    )\n  }, [approvalMethods, search])\n\n  return (\n    <div className=\"flex flex-col flex-1 min-h-0 gap-4\">\n      <InputGroup className=\"max-w-sm\">\n        <InputGroupInput\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          placeholder=\"Search service desks by name…\"\n          aria-label=\"Search service desks\"\n        />\n      </InputGroup>\n\n      <div className=\"flex-1 min-h-0 overflow-y-auto\">\n        {desks.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">\n            No service desks found{search && ` for \"${search}\"`}.\n          </p>\n        ) : (\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Service Desk</TableHead>\n                <TableHead>Link</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {desks.map((desk) => {\n                const url = desk.config.url\n                const description = desk.config.description\n                return (\n                  <TableRow key={desk.slug}>\n                    <TableCell className=\"font-medium align-top\">\n                      <span data-testid=\"service-desk-name\">\n                        {desk.displayName}\n                      </span>\n                      {description && (\n                        <span className=\"block text-xs font-normal text-muted-foreground\">\n                          {description}\n                        </span>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {url ? (\n                        <a\n                          href={url}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className=\"inline-flex items-center gap-1 text-primary hover:underline break-all\"\n                          title={url}\n                        >\n                          {url.replace(/^https?:\\/\\//, '')}\n                          <ExternalLink className=\"size-3 shrink-0\" />\n                        </a>\n                      ) : (\n                        <span className=\"text-muted-foreground\">—</span>\n                      )}\n                    </TableCell>\n                  </TableRow>\n                )\n              })}\n            </TableBody>\n          </Table>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAkBO,SAAS,mBAAmB;AACjC,QAAM,EAAE,gBAAA,IAAoB,qBAAA;AAC5B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,WAAW,gBAAgB,OAAO,CAAC,MAAM,EAAE,SAAS,SAAS;AACnE,UAAM,IAAI,OAAO,KAAA,EAAO,YAAA;AACxB,UAAM,WAAW,IACb,SAAS,OAAO,CAAC,MAAM,EAAE,YAAY,YAAA,EAAc,SAAS,CAAC,CAAC,IAC9D;AACJ,WAAO,CAAC,GAAG,QAAQ,EAAE;AAAA,MAAK,CAAC,GAAG,MAC5B,EAAE,YAAY,cAAc,EAAE,WAAW;AAAA,IAAA;AAAA,EAE7C,GAAG,CAAC,iBAAiB,MAAM,CAAC;AAE5B,SACE,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,WAAU,YACpB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,QACzC,aAAY;AAAA,QACZ,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEA,oBAAC,OAAA,EAAI,WAAU,kCACZ,UAAA,MAAM,WAAW,IAChB,qBAAC,KAAA,EAAE,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACpB,UAAU,SAAS,MAAM;AAAA,MAAI;AAAA,IAAA,EAAA,CACtD,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,aAAA,EACC,+BAAC,UAAA,EACC,UAAA;AAAA,QAAA,oBAAC,aAAU,UAAA,eAAA,CAAY;AAAA,QACvB,oBAAC,aAAU,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,CACjB,EAAA,CACF;AAAA,MACA,oBAAC,WAAA,EACE,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,cAAM,MAAM,KAAK,OAAO;AACxB,cAAM,cAAc,KAAK,OAAO;AAChC,oCACG,UAAA,EACC,UAAA;AAAA,UAAA,qBAAC,WAAA,EAAU,WAAU,yBACnB,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,eAAY,qBACf,UAAA,KAAK,aACR;AAAA,YACC,eACC,oBAAC,QAAA,EAAK,WAAU,mDACb,UAAA,YAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UACA,oBAAC,aACE,UAAA,MACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAO;AAAA,cACP,KAAI;AAAA,cACJ,WAAU;AAAA,cACV,OAAO;AAAA,cAEN,UAAA;AAAA,gBAAA,IAAI,QAAQ,gBAAgB,EAAE;AAAA,gBAC/B,oBAAC,cAAA,EAAa,WAAU,kBAAA,CAAkB;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAG5C,oBAAC,QAAA,EAAK,WAAU,yBAAwB,eAAC,EAAA,CAE7C;AAAA,QAAA,EAAA,GA1Ba,KAAK,IA2BpB;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -160,10 +160,13 @@ function Gallery({
               {
                 src: currentImage.url,
                 alt: currentImage.alt,
-                className: "max-w-full h-auto",
+                className: "max-w-full h-auto cursor-zoom-out",
+                onClick: () => setFullscreen(false),
                 onLoad: () => handleImageLoad(currentIndex),
                 onError: () => handleImageError(currentIndex),
-                style: { opacity: imageState === "loaded" ? 1 : 0 }
+                style: { opacity: imageState === "loaded" ? 1 : 0 },
+                role: "button",
+                "aria-label": "Zoom out"
               }
             )
           ] }),

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\"\n              onLoad={() => handleImageLoad(currentIndex)}\n              onError={() => handleImageError(currentIndex)}\n              style={{ opacity: imageState === 'loaded' ? 1 : 0 }}\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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"}
+{"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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.7.0",
-    "@igstack/app-catalog-shared-core": "0.7.0"
+    "@igstack/app-catalog-backend-core": "0.8.0",
+    "@igstack/app-catalog-shared-core": "0.8.0"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "7d6ab9e5f8fed7691348bf08d4766e32f33582ad",
+  "gitHead": "4b4f0b1953cb84985adc73c75943f1f0819b22ba",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/integration/mock-backend/magazines.ts

@@ -36,7 +36,10 @@ function fullMagazine(
       slug: 'it-helpdesk',
       type: 'service',
       displayName: 'IT Help Desk',
-      config: { url: 'https://helpdesk.example.com' },
+      config: {
+        url: 'https://helpdesk.example.com',
+        description: 'IT Infrastructure support desk',
+      },
     })
     backendCfg.withApprovalMethod({
       slug: 'ux-app-helpdesk',

package/src/__tests__/integration/serviceDesks.integration.test.ts

@@ -19,7 +19,10 @@ function serviceDeskTable(): HTMLElement {
 function deskNames(): string[] {
   const rows = within(serviceDeskTable()).getAllByRole('row')
   return rows
-    .map((r) => within(r).queryAllByRole('cell')[0]?.textContent.trim() ?? '')
+    .map(
+      (r) =>
+        within(r).queryByTestId('service-desk-name')?.textContent.trim() ?? '',
+    )
     .filter(Boolean)
 }
 
@@ -47,6 +50,34 @@ describe('Service Desks view (#9)', () => {
     const link = within(itRow).getByRole('link')
     expect(link).toHaveAttribute('href', 'https://helpdesk.example.com')
     expect(link).toHaveAttribute('target', '_blank')
+    // The link shows the full URL without the scheme, not generic "Open" text.
+    expect(link).toHaveTextContent('helpdesk.example.com')
+    expect(link).not.toHaveTextContent('Open')
+    expect(link).not.toHaveTextContent('https://')
+  })
+
+  it('shows the service desk description as subtext when present', async () => {
+    await given(magazine.full(), {
+      initialRoute: '/service-desks',
+    })
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Search service desks')).toBeInTheDocument()
+    })
+
+    // IT Help Desk has a description; it renders in the same name cell as subtext.
+    const itRow = within(serviceDeskTable())
+      .getAllByRole('row')
+      .find((r) => r.textContent.includes('IT Help Desk'))!
+    const nameCell = within(itRow).getAllByRole('cell')[0]
+    expect(nameCell).toHaveTextContent('IT Infrastructure support desk')
+
+    // UX App Helpdesk has no description — its name cell shows only the name.
+    const uxRow = within(serviceDeskTable())
+      .getAllByRole('row')
+      .find((r) => r.textContent.includes('UX App Helpdesk'))!
+    const uxNameCell = within(uxRow).getAllByRole('cell')[0]!
+    expect(uxNameCell.textContent.trim()).toBe('UX App Helpdesk')
   })
 
   it('filters the desks by search', async () => {

package/src/__tests__/modules/gallery/Gallery.zoom-toggle.test.tsx

@@ -0,0 +1,53 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+import { Gallery } from '~/modules/gallery/Gallery'
+import type { GalleryImage } from '~/modules/gallery/Gallery'
+
+const images: GalleryImage[] = [
+  { url: '/api/screenshots/img-1', alt: 'Screenshot 1' },
+  { url: '/api/screenshots/img-2', alt: 'Screenshot 2' },
+]
+
+// Issue #14 — clicking the fullscreen image should exit fullscreen,
+// making zoom-in / zoom-out a reversible click toggle.
+describe('Gallery — click image to exit fullscreen', () => {
+  it('exits fullscreen when the fullscreen image is clicked', async () => {
+    render(<Gallery images={images} />)
+
+    // Enter fullscreen by clicking the active slide image
+    const activeImg = screen.getByAltText('Screenshot 1')
+    await act(async () => {
+      fireEvent.click(activeImg)
+    })
+
+    // Fullscreen overlay should now be visible
+    const dialog = screen.getByRole('dialog', { name: /fullscreen view/i })
+    expect(dialog).toBeInTheDocument()
+
+    // Click the image inside the fullscreen overlay — should exit fullscreen
+    const fullscreenImg = screen.getByAltText('Screenshot 1')
+    await act(async () => {
+      fireEvent.click(fullscreenImg)
+    })
+
+    // Fullscreen overlay should be gone (back to the carousel)
+    expect(
+      screen.queryByRole('dialog', { name: /fullscreen view/i }),
+    ).not.toBeInTheDocument()
+  })
+
+  it('exposes the fullscreen image as an accessible exit control', async () => {
+    render(<Gallery images={images} />)
+
+    const activeImg = screen.getByAltText('Screenshot 1')
+    await act(async () => {
+      fireEvent.click(activeImg)
+    })
+
+    // The fullscreen image should itself be operable as an exit affordance
+    const imageControl = screen.getByRole('button', { name: /zoom out/i })
+    expect(imageControl).toBeInTheDocument()
+  })
+})

package/src/modules/appCatalog/ui/pages/ServiceDesksPage.tsx

@@ -58,10 +58,18 @@ export function ServiceDesksPage() {
             <TableBody>
               {desks.map((desk) => {
                 const url = desk.config.url
+                const description = desk.config.description
                 return (
                   <TableRow key={desk.slug}>
-                    <TableCell className="font-medium">
-                      {desk.displayName}
+                    <TableCell className="font-medium align-top">
+                      <span data-testid="service-desk-name">
+                        {desk.displayName}
+                      </span>
+                      {description && (
+                        <span className="block text-xs font-normal text-muted-foreground">
+                          {description}
+                        </span>
+                      )}
                     </TableCell>
                     <TableCell>
                       {url ? (
@@ -69,11 +77,11 @@ export function ServiceDesksPage() {
                           href={url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1 text-primary hover:underline"
+                          className="inline-flex items-center gap-1 text-primary hover:underline break-all"
                           title={url}
                         >
-                          Open
-                          <ExternalLink className="size-3" />
+                          {url.replace(/^https?:\/\//, '')}
+                          <ExternalLink className="size-3 shrink-0" />
                         </a>
                       ) : (
                         <span className="text-muted-foreground">—</span>

package/src/modules/gallery/Gallery.tsx

@@ -230,10 +230,13 @@ export function Gallery({
             <img
               src={currentImage.url}
               alt={currentImage.alt}
-              className="max-w-full h-auto"
+              className="max-w-full h-auto cursor-zoom-out"
+              onClick={() => setFullscreen(false)}
               onLoad={() => handleImageLoad(currentIndex)}
               onError={() => handleImageError(currentIndex)}
               style={{ opacity: imageState === 'loaded' ? 1 : 0 }}
+              role="button"
+              aria-label="Zoom out"
             />
           </div>
         )}