@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/photo-gallery.js

@@ -1,756 +1,324 @@
-// src/components/ui/photo-gallery.tsx
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
-import {
-  ChevronLeftIcon as ChevronLeftIcon2,
-  ChevronRightIcon as ChevronRightIcon2,
-  Fullscreen,
-  XIcon
-} from "lucide-react";
-import * as React2 from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/carousel.tsx
-import { cva as cva2 } from "class-variance-authority";
-import useEmblaCarousel from "embla-carousel-react";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+"use client";
+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 { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
-var carouselVariants = cva2(
-  "relative overflow-hidden rounded-2xl bg-surface-brand-subtle",
-  {
-    variants: {
-      imageSize: {
-        sm: "w-[320px] max-w-full aspect-[320/220]",
-        md: "w-[520px] max-w-full aspect-[520/340]",
-        lg: "w-[800px] max-w-full aspect-[800/500]",
-        full: "w-full"
-      }
-    },
-    defaultVariants: {
-      imageSize: "md"
-    }
-  }
-);
-var CarouselContext = React.createContext(null);
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-  return context;
-}
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  size,
-  imageSize,
-  className,
-  children,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y"
-    },
-    plugins
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const [scrollSnaps, setScrollSnaps] = React.useState([]);
-  const onSelect = React.useCallback((api2) => {
-    if (!api2) return;
-    setCanScrollPrev(api2.canScrollPrev());
-    setCanScrollNext(api2.canScrollNext());
-    setSelectedIndex(api2.selectedScrollSnap());
-  }, []);
-  const onReInit = React.useCallback(
-    (api2) => {
-      if (!api2) return;
-      setScrollSnaps(api2.scrollSnapList());
-      onSelect(api2);
-    },
-    [onSelect]
-  );
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-  const scrollTo = React.useCallback(
-    (index) => {
-      api?.scrollTo(index);
-    },
-    [api]
-  );
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext]
-  );
-  React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-  React.useEffect(() => {
-    if (!api) return;
-    onReInit(api);
-    api.on("reInit", onReInit);
-    api.on("select", onSelect);
-    return () => {
-      api?.off("reInit", onReInit);
-      api?.off("select", onSelect);
-    };
-  }, [api, onReInit, onSelect]);
-  return /* @__PURE__ */ jsx3(
-    CarouselContext.Provider,
-    {
-      value: {
-        carouselRef,
-        api,
-        orientation,
-        size: resolvedSize,
-        scrollPrev,
-        scrollNext,
-        scrollTo,
-        canScrollPrev,
-        canScrollNext,
-        selectedIndex,
-        scrollSnaps
-      },
-      children: /* @__PURE__ */ jsx3(
-        "div",
-        {
-          onKeyDownCapture: handleKeyDown,
-          className: cn(carouselVariants({ imageSize }), className),
-          role: "region",
-          "aria-roledescription": "carousel",
-          "data-slot": "carousel",
-          ...props,
-          children
-        }
-      )
-    }
-  );
-}
-function CarouselContent({ className, ...props }) {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      ref: carouselRef,
-      className: "h-full overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: cn(
-            "flex h-full",
-            orientation === "horizontal" ? "" : "flex-col",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  );
-}
-function CarouselItem({ className, ...props }) {
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role="group" with aria-roledescription per the W3C pattern, not a fieldset.
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        role: "group",
-        "aria-roledescription": "slide",
-        "data-slot": "carousel-item",
-        className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
-        ...props
-      }
-    )
-  );
-}
-var arrowVariants = cva2(
-  cn(
-    "absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none",
-    glassChrome,
-    "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"
-  ),
-  {
-    variants: {
-      size: {
-        sm: "size-8 [&_svg]:size-4",
-        md: "size-10 [&_svg]:size-[18px]",
-        lg: "size-12 [&_svg]:size-5"
-      },
-      side: {
-        prev: "",
-        next: ""
-      }
-    },
-    compoundVariants: [
-      { size: "sm", side: "prev", className: "left-3" },
-      { size: "sm", side: "next", className: "right-3" },
-      { size: "md", side: "prev", className: "left-4" },
-      { size: "md", side: "next", className: "right-4" },
-      { size: "lg", side: "prev", className: "left-5" },
-      { size: "lg", side: "next", className: "right-5" }
-    ],
-    defaultVariants: {
-      size: "md",
-      side: "prev"
-    }
-  }
-);
-
-// src/components/ui/photo-gallery.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+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] = React2.useState();
-  const [selectedIndex, setSelectedIndex] = React2.useState(index ?? 0);
-  const initialIndexRef = React2.useRef(index ?? 0);
-  const onIndexChangeRef = React2.useRef(onIndexChange);
-  React2.useEffect(() => {
-    onIndexChangeRef.current = onIndexChange;
-  });
-  React2.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]);
-  React2.useEffect(() => {
-    if (api && index !== void 0 && index !== api.selectedScrollSnap()) {
-      api.scrollTo(index, false);
-    }
-  }, [api, index]);
-  const scrollTo = React2.useCallback(
-    (i) => api?.scrollTo(i, false),
-    [api]
-  );
-  const scrollPrev = React2.useCallback(() => api?.scrollPrev(false), [api]);
-  const scrollNext = React2.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__ */ jsx4(
-    "div",
-    {
-      "data-slot": "photo-gallery-frame",
-      className: cn(
-        "relative flex size-full items-center justify-center overflow-hidden",
-        className
-      ),
-      children: image?.src ? /* @__PURE__ */ jsx4(
-        "img",
-        {
-          src: image.src,
-          alt: image.alt ?? "Property image",
-          className: cn(
-            "size-full",
-            fit === "contain" ? "object-contain" : "object-cover"
-          ),
-          draggable: false
-        }
-      ) : /* @__PURE__ */ jsx4("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__ */ jsxs3(
-  "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__ */ jsx4(
-        "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__ */ jsx4(
-        "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__ */ jsxs3(
-    "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__ */ jsx4(Images, { "aria-hidden": "true", className: "size-3.5" }),
-        /* @__PURE__ */ jsxs3("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__ */ jsx4(
-    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" ? ChevronLeftIcon2 : ChevronRightIcon2;
-  return /* @__PURE__ */ jsx4(
-    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__ */ jsx4(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,
-  activeVariant = "focus"
-}) {
-  const containerRef = React2.useRef(null);
-  React2.useEffect(() => {
-    const active = containerRef.current?.children[selectedIndex];
-    active?.scrollIntoView({
-      behavior: "smooth",
-      inline: "center",
-      block: "nearest"
-    });
-  }, [selectedIndex]);
-  if (images.length <= 1) return null;
-  return /* @__PURE__ */ jsx4(
-    "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",
-        colsClassName,
-        className
-      ),
-      children: images.map((image, index) => {
-        const isActive = index === selectedIndex;
-        return /* @__PURE__ */ jsx4(
-          "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)]",
-              activeVariant === "subtle" && "focus-visible:border-line-subtle focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-subtle)]",
-              isActive ? activeVariant === "subtle" ? "border-line-subtle" : "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"
-            ),
-            children: image.src ? /* @__PURE__ */ jsx4(
-              "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__ */ jsxs3(
-    "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__ */ jsxs3(
-          Carousel,
-          {
-            imageSize: "full",
-            setApi,
-            opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
-            className: "aspect-video rounded-xl bg-surface-raised",
-            children: [
-              /* @__PURE__ */ jsx4(CarouselContent, { children: images.map((image, i) => /* @__PURE__ */ jsx4(
-                CarouselItem,
-                {
-                  children: /* @__PURE__ */ jsx4(GalleryFrame, { image })
-                },
-                i
-              )) }),
-              onImageClick && /* @__PURE__ */ jsx4(
-                GalleryButton,
-                {
-                  className: "absolute bottom-2 right-2 sm:bottom-4 sm:right-4",
-                  onClick: () => onImageClick(selectedIndex),
-                  children: /* @__PURE__ */ jsx4(Fullscreen, { className: "size-4 md:size-5" })
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                GalleryCounter,
-                {
-                  current: selectedIndex + 1,
-                  total: images.length,
-                  className: "top-2 right-2 sm:top-4 md:right-4"
-                }
-              ),
-              hasMany && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                /* @__PURE__ */ jsx4(GalleryArrow, { side: "prev", onClick: scrollPrev }),
-                /* @__PURE__ */ jsx4(GalleryArrow, { side: "next", onClick: scrollNext })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          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__ */ jsx4(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx4(
-      DialogPrimitive.Backdrop,
-      {
-        "data-slot": "photo-gallery-fullscreen-backdrop",
-        className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100"
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      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__ */ jsx4(DialogPrimitive.Title, { className: "sr-only", children: "Photo Gallery" }),
-          /* @__PURE__ */ jsxs3("div", { className: "w-full flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx4(
-              GalleryCounter,
-              {
-                current: selectedIndex + 1,
-                total: images.length,
-                className: "static"
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              DialogPrimitive.Close,
-              {
-                "data-slot": "photo-gallery-fullscreen-close",
-                "aria-label": "Close gallery",
-                render: /* @__PURE__ */ jsx4(GalleryButton, {}),
-                children: /* @__PURE__ */ jsx4(XIcon, { className: "size-4 sm:size-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs3(
-            Carousel,
-            {
-              imageSize: "full",
-              setApi,
-              opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
-              className: "flex-1 w-full rounded-xl bg-transparent",
-              children: [
-                /* @__PURE__ */ jsx4(CarouselContent, { className: "items-center", children: images.map((image, i) => /* @__PURE__ */ jsx4(
-                  CarouselItem,
-                  {
-                    className: "h-full",
-                    children: /* @__PURE__ */ jsx4(GalleryFrame, { image, fit: "contain" })
-                  },
-                  i
-                )) }),
-                hasMany && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                  /* @__PURE__ */ jsx4(
-                    GalleryArrow,
-                    {
-                      side: "prev",
-                      onClick: scrollPrev,
-                      className: "left-0!"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4(
-                    GalleryArrow,
-                    {
-                      side: "next",
-                      onClick: scrollNext,
-                      className: "right-0!"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          hasMany && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx4("p", { className: "hidden text-center text-gdt-xs text-fg-secondary sm:block", children: "\u2190 \u2192 to navigate \xB7 ESC to close" }),
-            /* @__PURE__ */ jsx4(
-              GalleryThumbnails,
-              {
-                images,
-                selectedIndex,
-                onSelect: scrollTo,
-                colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:10]",
-                className: "mx-auto w-full max-w-3xl",
-                activeVariant: "subtle"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] }) });
+/**
+* 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 };