@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/photo-gallery.js

@@ -1,460 +1,324 @@
 "use client";
-import {
-  Button
-} from "./chunk-B4H6RNDH.js";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem
-} from "./chunk-FZDSVMKY.js";
-import "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/photo-gallery.tsx
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  Fullscreen,
-  XIcon
-} from "lucide-react";
-import * as React from "react";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { Carousel, CarouselContent, CarouselItem } from "./carousel.js";
+import { ChevronLeftIcon, ChevronRightIcon, Fullscreen, XIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/photo-gallery.tsx
+/**
+* Wires an Embla carousel to a controlled/uncontrolled active index. Returns
+* the `setApi` to hand to {@link Carousel} plus the live index and navigation
+* helpers. Both surfaces share this so the inline carousel and the fullscreen
+* viewer can stand alone — or stay in sync by sharing `index`/`onIndexChange`.
+*/
 function useGalleryCarousel(index, onIndexChange) {
-  const [api, setApi] = React.useState();
-  const [selectedIndex, setSelectedIndex] = React.useState(index ?? 0);
-  const initialIndexRef = React.useRef(index ?? 0);
-  const onIndexChangeRef = React.useRef(onIndexChange);
-  React.useEffect(() => {
-    onIndexChangeRef.current = onIndexChange;
-  });
-  React.useEffect(() => {
-    if (!api) return;
-    const onSelect = () => {
-      const next = api.selectedScrollSnap();
-      setSelectedIndex(next);
-      onIndexChangeRef.current?.(next);
-    };
-    onSelect();
-    api.on("select", onSelect).on("reInit", onSelect);
-    return () => {
-      api.off("select", onSelect).off("reInit", onSelect);
-    };
-  }, [api]);
-  React.useEffect(() => {
-    if (api && index !== void 0 && index !== api.selectedScrollSnap()) {
-      api.scrollTo(index, false);
-    }
-  }, [api, index]);
-  const scrollTo = React.useCallback(
-    (i) => api?.scrollTo(i, false),
-    [api]
-  );
-  const scrollPrev = React.useCallback(() => api?.scrollPrev(false), [api]);
-  const scrollNext = React.useCallback(() => api?.scrollNext(false), [api]);
-  return {
-    setApi,
-    selectedIndex,
-    initialIndex: initialIndexRef.current,
-    scrollTo,
-    scrollPrev,
-    scrollNext
-  };
+	const [api, setApi] = React.useState();
+	const [selectedIndex, setSelectedIndex] = React.useState(index ?? 0);
+	const initialIndexRef = React.useRef(index ?? 0);
+	const onIndexChangeRef = React.useRef(onIndexChange);
+	React.useEffect(() => {
+		onIndexChangeRef.current = onIndexChange;
+	});
+	React.useEffect(() => {
+		if (!api) return;
+		const onSelect = () => {
+			const next = api.selectedScrollSnap();
+			setSelectedIndex(next);
+			onIndexChangeRef.current?.(next);
+		};
+		onSelect();
+		api.on("select", onSelect).on("reInit", onSelect);
+		return () => {
+			api.off("select", onSelect).off("reInit", onSelect);
+		};
+	}, [api]);
+	React.useEffect(() => {
+		if (api && index !== void 0 && index !== api.selectedScrollSnap()) api.scrollTo(index, false);
+	}, [api, index]);
+	const scrollTo = React.useCallback((i) => api?.scrollTo(i, false), [api]);
+	const scrollPrev = React.useCallback(() => api?.scrollPrev(false), [api]);
+	const scrollNext = React.useCallback(() => api?.scrollNext(false), [api]);
+	return {
+		setApi,
+		selectedIndex,
+		initialIndex: initialIndexRef.current,
+		scrollTo,
+		scrollPrev,
+		scrollNext
+	};
 }
-function GalleryFrame({
-  image,
-  fit = "cover",
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "photo-gallery-frame",
-      className: cn(
-        "relative flex size-full items-center justify-center overflow-hidden",
-        className
-      ),
-      children: image?.src ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: image.src,
-          alt: image.alt ?? "Property image",
-          className: cn(
-            fit === "contain" ? "max-h-full max-w-full rounded-lg object-contain" : "size-full object-cover"
-          ),
-          draggable: false
-        }
-      ) : /* @__PURE__ */ jsx("span", { className: "text-gdt-sm font-medium text-fg-caption-placeholder", children: "Property Image" })
-    }
-  );
+/**
+* The image surface. Centres its image within the slide; falls back to a
+* "Property Image" label when `src` is missing. `cover` fills and crops the
+* frame for the listing hero; `contain` clamps the photo to the frame's bounds
+* (`max-w`/`max-h`) so the whole image stays visible — never overflowing the
+* fullscreen viewer's chrome and never stretched out of its aspect ratio.
+*/
+function GalleryFrame({ image, fit = "cover", className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "photo-gallery-frame",
+		className: cn("relative flex size-full items-center justify-center overflow-hidden", className),
+		children: image?.src ? /* @__PURE__ */ jsx("img", {
+			src: image.src,
+			alt: image.alt ?? "Property image",
+			className: cn(fit === "contain" ? "max-h-full max-w-full rounded-lg object-contain" : "size-full object-cover"),
+			draggable: false
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "text-gdt-sm font-medium text-fg-caption-placeholder",
+			children: "Property Image"
+		})
+	});
 }
-var Images = (props) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    "aria-hidden": "true",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 15,
-    height: 16,
-    viewBox: "0 0 15 16",
-    fill: "none",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M6.72 14.332c-.705 0-1.38-.3-1.878-.83a2.935 2.935 0 0 1-.779-2.003V2.012l-3.02.738c-.36.102-.667.353-.853.697a1.587 1.587 0 0 0-.143 1.136l2.589 10.309c.083.318.261.598.507.798.246.2.546.309.856.31.115 0 .233-.015.349-.048l6.3-1.62H6.72ZM8.125 6c.69 0 1.25-.597 1.25-1.333 0-.735-.56-1.333-1.25-1.333s-1.25.598-1.25 1.333c0 .736.56 1.333 1.25 1.333Z"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M15 2a2.07 2.07 0 0 0-.55-1.414A1.818 1.818 0 0 0 13.126 0h-6.25C6.376 0 5.9.21 5.547.586A2.07 2.07 0 0 0 4.998 2v9.332c0 .53.198 1.04.55 1.414.352.375.829.586 1.326.586h6.25c.498 0 .975-.21 1.327-.586.351-.375.549-.883.549-1.414V2Zm-8.126-.667h6.25c.166 0 .325.07.443.195A.69.69 0 0 1 13.75 2v4.292l-.475-.507a1.094 1.094 0 0 0-.356-.253 1.037 1.037 0 0 0-.839 0 1.094 1.094 0 0 0-.355.253L8.749 8.96l-.787-.84a1.094 1.094 0 0 0-.356-.254 1.037 1.037 0 0 0-.839 0 1.094 1.094 0 0 0-.355.254l-.163.173V2a.69.69 0 0 1 .183-.472.606.606 0 0 1 .442-.195Z"
-        }
-      )
-    ]
-  }
-);
-function GalleryCounter({
-  current,
-  total,
-  className
-}) {
-  if (total <= 1) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "photo-gallery-counter",
-      className: cn(
-        "pointer-events-none absolute z-10 inline-flex items-center gap-1.5 rounded-full border border-line bg-surface-overlay px-2.5 py-1 text-gdt-xs font-bold text-fg-primary shadow-2",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Images, { "aria-hidden": "true", className: "size-3.5" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          current,
-          " / ",
-          total
-        ] })
-      ]
-    }
-  );
+const Images = (props) => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 15,
+	height: 16,
+	viewBox: "0 0 15 16",
+	fill: "none",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M6.72 14.332c-.705 0-1.38-.3-1.878-.83a2.935 2.935 0 0 1-.779-2.003V2.012l-3.02.738c-.36.102-.667.353-.853.697a1.587 1.587 0 0 0-.143 1.136l2.589 10.309c.083.318.261.598.507.798.246.2.546.309.856.31.115 0 .233-.015.349-.048l6.3-1.62H6.72ZM8.125 6c.69 0 1.25-.597 1.25-1.333 0-.735-.56-1.333-1.25-1.333s-1.25.598-1.25 1.333c0 .736.56 1.333 1.25 1.333Z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M15 2a2.07 2.07 0 0 0-.55-1.414A1.818 1.818 0 0 0 13.126 0h-6.25C6.376 0 5.9.21 5.547.586A2.07 2.07 0 0 0 4.998 2v9.332c0 .53.198 1.04.55 1.414.352.375.829.586 1.326.586h6.25c.498 0 .975-.21 1.327-.586.351-.375.549-.883.549-1.414V2Zm-8.126-.667h6.25c.166 0 .325.07.443.195A.69.69 0 0 1 13.75 2v4.292l-.475-.507a1.094 1.094 0 0 0-.356-.253 1.037 1.037 0 0 0-.839 0 1.094 1.094 0 0 0-.355.253L8.749 8.96l-.787-.84a1.094 1.094 0 0 0-.356-.254 1.037 1.037 0 0 0-.839 0 1.094 1.094 0 0 0-.355.254l-.163.173V2a.69.69 0 0 1 .183-.472.606.606 0 0 1 .442-.195Z"
+	})]
+});
+/** Pill overlay showing `current / total`. Hidden when there is one image. */
+function GalleryCounter({ current, total, className }) {
+	if (total <= 1) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "photo-gallery-counter",
+		className: cn("pointer-events-none absolute z-10 inline-flex items-center gap-1.5 rounded-full border border-line bg-surface-overlay px-2.5 py-1 text-gdt-xs font-bold text-fg-primary shadow-2", className),
+		children: [/* @__PURE__ */ jsx(Images, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		}), /* @__PURE__ */ jsxs("span", { children: [
+			current,
+			" / ",
+			total
+		] })]
+	});
 }
-function GalleryButton({
-  className,
-  variant = "ghost",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      size: "icon",
-      className: cn(
-        "border border-line bg-surface-overlay text-fg-primary shadow-2 transition-[background-color] outline-none hover:bg-surface-raised focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] size-9 sm:size-11",
-        className
-      ),
-      variant,
-      ...rest
-    }
-  );
+function GalleryButton({ className, variant = "ghost", ...rest }) {
+	return /* @__PURE__ */ jsx(Button, {
+		size: "icon",
+		className: cn("border border-line bg-surface-overlay text-fg-primary shadow-2 transition-[background-color] outline-none hover:bg-surface-raised focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] size-9 sm:size-11", className),
+		variant,
+		...rest
+	});
 }
-function GalleryArrow({
-  side,
-  onClick,
-  className
-}) {
-  const Icon = side === "prev" ? ChevronLeftIcon : ChevronRightIcon;
-  return /* @__PURE__ */ jsx(
-    GalleryButton,
-    {
-      type: "button",
-      "data-slot": `photo-gallery-${side}`,
-      "aria-label": side === "prev" ? "Previous photo" : "Next photo",
-      onClick: (event) => {
-        event.stopPropagation();
-        onClick();
-      },
-      className: cn(
-        "absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center active:not-aria-[haspopup]:-translate-y-1/2",
-        side === "prev" ? "left-2 sm:left-4" : "right-2 sm:right-4",
-        className
-      ),
-      children: /* @__PURE__ */ jsx(Icon, { className: "cn-rtl-flip size-4 sm:size-5" })
-    }
-  );
+/** Circular floating navigation button. Always present; the track loops. */
+function GalleryArrow({ side, onClick, className }) {
+	const Icon = side === "prev" ? ChevronLeftIcon : ChevronRightIcon;
+	return /* @__PURE__ */ jsx(GalleryButton, {
+		type: "button",
+		"data-slot": `photo-gallery-${side}`,
+		"aria-label": side === "prev" ? "Previous photo" : "Next photo",
+		onClick: (event) => {
+			event.stopPropagation();
+			onClick();
+		},
+		className: cn("absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center active:not-aria-[haspopup]:-translate-y-1/2", side === "prev" ? "left-2 sm:left-4" : "right-2 sm:right-4", className),
+		children: /* @__PURE__ */ jsx(Icon, { className: "cn-rtl-flip size-4 sm:size-5" })
+	});
 }
-function GalleryThumbnails({
-  images,
-  selectedIndex,
-  onSelect,
-  colsClassName,
-  className
-}) {
-  const containerRef = React.useRef(null);
-  const hasPositionedRef = React.useRef(false);
-  const [overflowing, setOverflowing] = React.useState(false);
-  React.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const update = () => setOverflowing(el.scrollWidth > el.clientWidth + 1);
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  React.useEffect(() => {
-    const active = containerRef.current?.children[selectedIndex];
-    if (!active) return;
-    active.scrollIntoView({
-      behavior: hasPositionedRef.current ? "smooth" : "auto",
-      inline: "center",
-      block: "nearest"
-    });
-    hasPositionedRef.current = true;
-  }, [selectedIndex]);
-  if (images.length <= 1) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      "data-slot": "photo-gallery-thumbnails",
-      className: cn(
-        "flex gap-2 overflow-x-auto [--gallery-gap:0.5rem] scrollbar-none [&::-webkit-scrollbar]:hidden",
-        overflowing ? "justify-start" : "justify-center",
-        colsClassName,
-        className
-      ),
-      children: images.map((image, index) => {
-        const isActive = index === selectedIndex;
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": `View photo ${index + 1}`,
-            "aria-current": isActive,
-            onClick: () => onSelect(index),
-            style: {
-              width: "calc((100% - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols))"
-            },
-            className: cn(
-              "relative aspect-4/3 shrink-0 overflow-hidden rounded-lg border-2 bg-surface-raised transition-[border-color,opacity] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
-              isActive ? "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"
-            ),
-            children: image.src ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: image.src,
-                alt: image.alt ?? `Property image ${index + 1}`,
-                className: "size-full object-cover",
-                draggable: false
-              }
-            ) : null
-          },
-          index
-        );
-      })
-    }
-  );
+/**
+* Equal-sized thumbnail strip. `cols` are sized via CSS vars so exactly N fill
+* the width (5 on mobile, more on web); extras overflow and scroll. The active
+* thumb gets a 2px focus stroke and is kept in view as the index changes.
+*/
+function GalleryThumbnails({ images, selectedIndex, onSelect, colsClassName, className }) {
+	const containerRef = React.useRef(null);
+	const hasPositionedRef = React.useRef(false);
+	const [overflowing, setOverflowing] = React.useState(false);
+	React.useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const update = () => setOverflowing(el.scrollWidth > el.clientWidth + 1);
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	React.useEffect(() => {
+		const active = containerRef.current?.children[selectedIndex];
+		if (!active) return;
+		active.scrollIntoView({
+			behavior: hasPositionedRef.current ? "smooth" : "auto",
+			inline: "center",
+			block: "nearest"
+		});
+		hasPositionedRef.current = true;
+	}, [selectedIndex]);
+	if (images.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		"data-slot": "photo-gallery-thumbnails",
+		className: cn("flex gap-2 overflow-x-auto [--gallery-gap:0.5rem] scrollbar-none [&::-webkit-scrollbar]:hidden", overflowing ? "justify-start" : "justify-center", colsClassName, className),
+		children: images.map((image, index) => {
+			const isActive = index === selectedIndex;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `View photo ${index + 1}`,
+				"aria-current": isActive,
+				onClick: () => onSelect(index),
+				style: { width: "calc((100% - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols))" },
+				className: cn("relative aspect-4/3 shrink-0 overflow-hidden rounded-lg border-2 bg-surface-raised transition-[border-color,opacity] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", isActive ? "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"),
+				children: image.src ? /* @__PURE__ */ jsx("img", {
+					src: image.src,
+					alt: image.alt ?? `Property image ${index + 1}`,
+					className: "size-full object-cover",
+					draggable: false
+				}) : null
+			}, index);
+		})
+	});
 }
-function PhotoGallery({
-  images,
-  index,
-  onIndexChange,
-  onImageClick,
-  className,
-  ...props
-}) {
-  const {
-    setApi,
-    selectedIndex,
-    initialIndex,
-    scrollTo,
-    scrollPrev,
-    scrollNext
-  } = useGalleryCarousel(index, onIndexChange);
-  const hasMany = images.length > 1;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "photo-gallery",
-      className: cn(
-        "flex w-full flex-col gap-3 rounded-2xl border border-line bg-surface p-3",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Carousel,
-          {
-            imageSize: "full",
-            setApi,
-            opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
-            className: "aspect-video rounded-xl bg-surface-raised",
-            children: [
-              /* @__PURE__ */ jsx(CarouselContent, { children: images.map((image, i) => /* @__PURE__ */ jsx(
-                CarouselItem,
-                {
-                  children: /* @__PURE__ */ jsx(GalleryFrame, { image })
-                },
-                i
-              )) }),
-              onImageClick && /* @__PURE__ */ jsx(
-                GalleryButton,
-                {
-                  className: "absolute bottom-2 right-2 sm:bottom-4 sm:right-4",
-                  onClick: () => onImageClick(selectedIndex),
-                  children: /* @__PURE__ */ jsx(Fullscreen, { className: "size-4 md:size-5" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                GalleryCounter,
-                {
-                  current: selectedIndex + 1,
-                  total: images.length,
-                  className: "top-2 right-2 sm:top-4 md:right-4"
-                }
-              ),
-              hasMany && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(GalleryArrow, { side: "prev", onClick: scrollPrev }),
-                /* @__PURE__ */ jsx(GalleryArrow, { side: "next", onClick: scrollNext })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          GalleryThumbnails,
-          {
-            images,
-            selectedIndex,
-            onSelect: scrollTo,
-            colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:8]"
-          }
-        )
-      ]
-    }
-  );
+/**
+* Inline property gallery: a swipeable hero image (drag / touch / ← →) with a
+* counter pill, navigation arrows, and a thumbnail strip below. Built on
+* {@link Carousel}. Standalone — pass `onImageClick` to open it into a
+* {@link PhotoGalleryFullscreen} viewer, but neither surface needs the other.
+*/
+function PhotoGallery({ images, index, onIndexChange, onImageClick, className, ...props }) {
+	const { setApi, selectedIndex, initialIndex, scrollTo, scrollPrev, scrollNext } = useGalleryCarousel(index, onIndexChange);
+	const hasMany = images.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "photo-gallery",
+		className: cn("flex w-full flex-col gap-3 rounded-2xl border border-line bg-surface p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(Carousel, {
+			imageSize: "full",
+			setApi,
+			opts: {
+				loop: true,
+				startIndex: initialIndex,
+				watchDrag: hasMany
+			},
+			className: "aspect-video rounded-xl bg-surface-raised",
+			children: [
+				/* @__PURE__ */ jsx(CarouselContent, { children: images.map((image, i) => /* @__PURE__ */ jsx(CarouselItem, { children: /* @__PURE__ */ jsx(GalleryFrame, { image }) }, i)) }),
+				onImageClick && /* @__PURE__ */ jsx(GalleryButton, {
+					className: "absolute bottom-2 right-2 sm:bottom-4 sm:right-4",
+					onClick: () => onImageClick(selectedIndex),
+					children: /* @__PURE__ */ jsx(Fullscreen, { className: "size-4 md:size-5" })
+				}),
+				/* @__PURE__ */ jsx(GalleryCounter, {
+					current: selectedIndex + 1,
+					total: images.length,
+					className: "top-2 right-2 sm:top-4 md:right-4"
+				}),
+				hasMany && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GalleryArrow, {
+					side: "prev",
+					onClick: scrollPrev
+				}), /* @__PURE__ */ jsx(GalleryArrow, {
+					side: "next",
+					onClick: scrollNext
+				})] })
+			]
+		}), /* @__PURE__ */ jsx(GalleryThumbnails, {
+			images,
+			selectedIndex,
+			onSelect: scrollTo,
+			colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:8]"
+		})]
+	});
 }
-function PhotoGalleryFullscreen({
-  images,
-  open,
-  onOpenChange,
-  index,
-  onIndexChange
-}) {
-  const {
-    setApi,
-    selectedIndex,
-    initialIndex,
-    scrollTo,
-    scrollPrev,
-    scrollNext
-  } = useGalleryCarousel(index, onIndexChange);
-  const hasMany = images.length > 1;
-  const handleKeyDown = (event) => {
-    if (event.defaultPrevented) return;
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      scrollPrev();
-    } else if (event.key === "ArrowRight") {
-      event.preventDefault();
-      scrollNext();
-    }
-  };
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx(
-      DialogPrimitive.Backdrop,
-      {
-        "data-slot": "photo-gallery-fullscreen-backdrop",
-        className: "fixed inset-0 z-50 bg-black/90 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100"
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Popup,
-      {
-        "data-slot": "photo-gallery-fullscreen",
-        onKeyDown: handleKeyDown,
-        className: "fixed inset-0 z-50 flex flex-col gap-4 p-4 sm:p-6 xl:p-8 outline-none transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100",
-        children: [
-          /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: "Photo Gallery" }),
-          /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx(
-              GalleryCounter,
-              {
-                current: selectedIndex + 1,
-                total: images.length,
-                className: "static"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              DialogPrimitive.Close,
-              {
-                "data-slot": "photo-gallery-fullscreen-close",
-                "aria-label": "Close gallery",
-                render: /* @__PURE__ */ jsx(GalleryButton, {}),
-                children: /* @__PURE__ */ jsx(XIcon, { className: "size-4 sm:size-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(
-            Carousel,
-            {
-              imageSize: "full",
-              setApi,
-              opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
-              className: "min-h-0 flex-1 w-full rounded-xl bg-transparent",
-              children: [
-                /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: images.map((image, i) => /* @__PURE__ */ jsx(
-                  CarouselItem,
-                  {
-                    className: "h-full",
-                    children: /* @__PURE__ */ jsx(GalleryFrame, { image, fit: "contain" })
-                  },
-                  i
-                )) }),
-                hasMany && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    GalleryArrow,
-                    {
-                      side: "prev",
-                      onClick: scrollPrev,
-                      className: "left-0!"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    GalleryArrow,
-                    {
-                      side: "next",
-                      onClick: scrollNext,
-                      className: "right-0!"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          hasMany && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "hidden text-center text-gdt-xs text-fg-secondary sm:block", children: "\u2190 \u2192 to navigate \xB7 ESC to close" }),
-            /* @__PURE__ */ jsx(
-              GalleryThumbnails,
-              {
-                images,
-                selectedIndex,
-                onSelect: scrollTo,
-                colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:10]",
-                className: "mx-auto w-full max-w-3xl"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] }) });
+/**
+* Fullscreen lightbox: takes over the viewport over a dimmed backdrop for
+* distraction-free browsing. Swipeable (drag / touch) with ← → key navigation
+* and ESC to close. Built on {@link Carousel}; controlled via `open` /
+* `onOpenChange` and usable without the inline gallery.
+*/
+function PhotoGalleryFullscreen({ images, open, onOpenChange, index, onIndexChange }) {
+	const { setApi, selectedIndex, initialIndex, scrollTo, scrollPrev, scrollNext } = useGalleryCarousel(index, onIndexChange);
+	const hasMany = images.length > 1;
+	const handleKeyDown = (event) => {
+		if (event.defaultPrevented) return;
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	};
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+			"data-slot": "photo-gallery-fullscreen-backdrop",
+			className: "fixed inset-0 z-50 bg-black/90 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100"
+		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			"data-slot": "photo-gallery-fullscreen",
+			onKeyDown: handleKeyDown,
+			className: "fixed inset-0 z-50 flex flex-col gap-4 p-4 sm:p-6 xl:p-8 outline-none transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100",
+			children: [
+				/* @__PURE__ */ jsx(Dialog.Title, {
+					className: "sr-only",
+					children: "Photo Gallery"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "w-full flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx(GalleryCounter, {
+						current: selectedIndex + 1,
+						total: images.length,
+						className: "static"
+					}), /* @__PURE__ */ jsx(Dialog.Close, {
+						"data-slot": "photo-gallery-fullscreen-close",
+						"aria-label": "Close gallery",
+						render: /* @__PURE__ */ jsx(GalleryButton, {}),
+						children: /* @__PURE__ */ jsx(XIcon, { className: "size-4 sm:size-5" })
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Carousel, {
+					imageSize: "full",
+					setApi,
+					opts: {
+						loop: true,
+						startIndex: initialIndex,
+						watchDrag: hasMany
+					},
+					className: "min-h-0 flex-1 w-full rounded-xl bg-transparent",
+					children: [/* @__PURE__ */ jsx(CarouselContent, {
+						className: "items-center",
+						children: images.map((image, i) => /* @__PURE__ */ jsx(CarouselItem, {
+							className: "h-full",
+							children: /* @__PURE__ */ jsx(GalleryFrame, {
+								image,
+								fit: "contain"
+							})
+						}, i))
+					}), hasMany && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GalleryArrow, {
+						side: "prev",
+						onClick: scrollPrev,
+						className: "left-0!"
+					}), /* @__PURE__ */ jsx(GalleryArrow, {
+						side: "next",
+						onClick: scrollNext,
+						className: "right-0!"
+					})] })]
+				}),
+				hasMany && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "hidden text-center text-gdt-xs text-fg-secondary sm:block",
+						children: "← → to navigate · ESC to close"
+					}), /* @__PURE__ */ jsx(GalleryThumbnails, {
+						images,
+						selectedIndex,
+						onSelect: scrollTo,
+						colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:10]",
+						className: "mx-auto w-full max-w-3xl"
+					})]
+				})
+			]
+		})] })
+	});
 }
-export {
-  PhotoGallery,
-  PhotoGalleryFullscreen
-};
-//# sourceMappingURL=photo-gallery.js.map
+//#endregion
+export { PhotoGallery, PhotoGalleryFullscreen };