@classytic/fluid 0.4.2 → 0.5.0

package/dist/client/error.d.mts

@@ -1,7 +1,47 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentType, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { FallbackProps } from "react-error-boundary";
 
+//#region src/components/async-boundary.d.ts
+interface AsyncBoundaryProps {
+  /** Suspense fallback (shown while loading) */
+  fallback?: ReactNode;
+  /** Error fallback component (shown on error) */
+  errorFallback?: ComponentType<FallbackProps>;
+  /** Called when an error is caught */
+  onError?: (error: unknown, info: {
+    componentStack?: string | null;
+  }) => void;
+  /** Called when the error boundary resets */
+  onReset?: () => void;
+  children: ReactNode;
+}
+/**
+ * AsyncBoundary — Suspense + ErrorBoundary combined.
+ *
+ * If `errorFallback` is provided, wraps in ErrorBoundary from react-error-boundary.
+ * Otherwise, renders Suspense only.
+ *
+ * @example
+ * ```tsx
+ * import { AsyncBoundary, InlineErrorFallback } from "@classytic/fluid/client";
+ *
+ * <AsyncBoundary
+ *   fallback={<SkeletonTable rows={5} />}
+ *   errorFallback={InlineErrorFallback}
+ * >
+ *   <DataFetchingComponent />
+ * </AsyncBoundary>
+ * ```
+ */
+declare function AsyncBoundary({
+  fallback,
+  errorFallback: ErrorFallback,
+  onError,
+  onReset,
+  children
+}: AsyncBoundaryProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/components/error-boundary.d.ts
 interface ErrorBoundaryFallbackProps extends FallbackProps {}
 interface ErrorBoundaryProps {
@@ -82,44 +122,4 @@ declare function FeatureErrorBoundary({
   className
 }: FeatureErrorBoundaryProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/async-boundary.d.ts
-interface AsyncBoundaryProps {
-  /** Suspense fallback (shown while loading) */
-  fallback?: ReactNode;
-  /** Error fallback component (shown on error) */
-  errorFallback?: ComponentType<FallbackProps>;
-  /** Called when an error is caught */
-  onError?: (error: unknown, info: {
-    componentStack?: string | null;
-  }) => void;
-  /** Called when the error boundary resets */
-  onReset?: () => void;
-  children: ReactNode;
-}
-/**
- * AsyncBoundary — Suspense + ErrorBoundary combined.
- *
- * If `errorFallback` is provided, wraps in ErrorBoundary from react-error-boundary.
- * Otherwise, renders Suspense only.
- *
- * @example
- * ```tsx
- * import { AsyncBoundary, InlineErrorFallback } from "@classytic/fluid/client";
- *
- * <AsyncBoundary
- *   fallback={<SkeletonTable rows={5} />}
- *   errorFallback={InlineErrorFallback}
- * >
- *   <DataFetchingComponent />
- * </AsyncBoundary>
- * ```
- */
-declare function AsyncBoundary({
-  fallback,
-  errorFallback: ErrorFallback,
-  onError,
-  onReset,
-  children
-}: AsyncBoundaryProps): react_jsx_runtime0.JSX.Element;
-//#endregion
 export { AsyncBoundary, type AsyncBoundaryProps, ErrorBoundary, type ErrorBoundaryFallbackProps, type ErrorBoundaryProps, FeatureErrorBoundary, type FeatureErrorBoundaryProps, FullPageErrorFallback, InlineErrorFallback };

package/dist/client/error.mjs

@@ -1,12 +1,46 @@
 "use client";
 
 import { t as cn } from "../utils-DQ5SCVoW.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Suspense } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle, Home, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
 
+//#region src/components/async-boundary.tsx
+/**
+* AsyncBoundary — Suspense + ErrorBoundary combined.
+*
+* If `errorFallback` is provided, wraps in ErrorBoundary from react-error-boundary.
+* Otherwise, renders Suspense only.
+*
+* @example
+* ```tsx
+* import { AsyncBoundary, InlineErrorFallback } from "@classytic/fluid/client";
+*
+* <AsyncBoundary
+*   fallback={<SkeletonTable rows={5} />}
+*   errorFallback={InlineErrorFallback}
+* >
+*   <DataFetchingComponent />
+* </AsyncBoundary>
+* ```
+*/
+function AsyncBoundary({ fallback, errorFallback: ErrorFallback, onError, onReset, children }) {
+	const suspenseWrapped = /* @__PURE__ */ jsx(Suspense, {
+		fallback: fallback ?? null,
+		children
+	});
+	if (!ErrorFallback) return suspenseWrapped;
+	return /* @__PURE__ */ jsx(ErrorBoundary$1, {
+		FallbackComponent: ErrorFallback,
+		onError,
+		onReset,
+		children: suspenseWrapped
+	});
+}
+
+//#endregion
 //#region src/components/error-boundary.tsx
 /**
 * Full-page error fallback with retry and go-home buttons.
@@ -128,39 +162,5 @@ function FeatureErrorBoundary({ featureName = "Feature", onError, onReset, child
 	});
 }
 
-//#endregion
-//#region src/components/async-boundary.tsx
-/**
-* AsyncBoundary — Suspense + ErrorBoundary combined.
-*
-* If `errorFallback` is provided, wraps in ErrorBoundary from react-error-boundary.
-* Otherwise, renders Suspense only.
-*
-* @example
-* ```tsx
-* import { AsyncBoundary, InlineErrorFallback } from "@classytic/fluid/client";
-*
-* <AsyncBoundary
-*   fallback={<SkeletonTable rows={5} />}
-*   errorFallback={InlineErrorFallback}
-* >
-*   <DataFetchingComponent />
-* </AsyncBoundary>
-* ```
-*/
-function AsyncBoundary({ fallback, errorFallback: ErrorFallback, onError, onReset, children }) {
-	const suspenseWrapped = /* @__PURE__ */ jsx(Suspense, {
-		fallback: fallback ?? null,
-		children
-	});
-	if (!ErrorFallback) return suspenseWrapped;
-	return /* @__PURE__ */ jsx(ErrorBoundary$1, {
-		FallbackComponent: ErrorFallback,
-		onError,
-		onReset,
-		children: suspenseWrapped
-	});
-}
-
 //#endregion
 export { AsyncBoundary, ErrorBoundary, FeatureErrorBoundary, FullPageErrorFallback, InlineErrorFallback };

package/dist/client/gallery.d.mts

@@ -1,6 +1,25 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/components/gallery/gallery-dots.d.ts
+interface GalleryDotsProps {
+  /** Show on desktop (default: false — dots are usually mobile-only) */
+  showOnDesktop?: boolean;
+  className?: string;
+}
+declare function GalleryDots({
+  showOnDesktop,
+  className
+}: GalleryDotsProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/gallery/gallery-lightbox.d.ts
+interface GalleryLightboxProps {
+  className?: string;
+}
+declare function GalleryLightbox({
+  className
+}: GalleryLightboxProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
 //#region src/components/gallery/types.d.ts
 interface GalleryImage {
   src: string;
@@ -60,6 +79,19 @@ declare function GalleryMain({
   className
 }: GalleryMainProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/gallery/gallery-nav.d.ts
+interface GalleryNavProps {
+  /** Which direction this button navigates */
+  direction: "prev" | "next";
+  className?: string;
+  children?: React.ReactNode;
+}
+declare function GalleryNav({
+  direction,
+  className,
+  children
+}: GalleryNavProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
 //#region src/components/gallery/gallery-thumbnails.d.ts
 interface GalleryThumbnailsProps {
   /** Show on mobile (default: true) */
@@ -77,38 +109,6 @@ declare function GalleryThumbnails({
   className
 }: GalleryThumbnailsProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-//#region src/components/gallery/gallery-dots.d.ts
-interface GalleryDotsProps {
-  /** Show on desktop (default: false — dots are usually mobile-only) */
-  showOnDesktop?: boolean;
-  className?: string;
-}
-declare function GalleryDots({
-  showOnDesktop,
-  className
-}: GalleryDotsProps): react_jsx_runtime0.JSX.Element | null;
-//#endregion
-//#region src/components/gallery/gallery-lightbox.d.ts
-interface GalleryLightboxProps {
-  className?: string;
-}
-declare function GalleryLightbox({
-  className
-}: GalleryLightboxProps): react_jsx_runtime0.JSX.Element | null;
-//#endregion
-//#region src/components/gallery/gallery-nav.d.ts
-interface GalleryNavProps {
-  /** Which direction this button navigates */
-  direction: "prev" | "next";
-  className?: string;
-  children?: React.ReactNode;
-}
-declare function GalleryNav({
-  direction,
-  className,
-  children
-}: GalleryNavProps): react_jsx_runtime0.JSX.Element | null;
-//#endregion
 //#region src/components/gallery/index.d.ts
 interface ImageGalleryRootProps {
   children: ReactNode;

package/dist/client/gallery.mjs

@@ -1,8 +1,8 @@
 "use client";
 
 import { t as cn } from "../utils-DQ5SCVoW.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight, RotateCcw, X, ZoomIn, ZoomOut } from "lucide-react";
 import Image from "next/image";
 
@@ -63,130 +63,6 @@ function GalleryProvider({ children, images, defaultIndex = 0, classNames, title
 	});
 }
 
-//#endregion
-//#region src/components/gallery/gallery-main.tsx
-function GalleryMain({ children, badges, showNav = true, aspectRatio = "aspect-[4/5]", className }) {
-	const { images, selectedIndex, setLightboxOpen, goToNext, goToPrevious, classNames, title } = useGallery();
-	const [imagesLoaded, setImagesLoaded] = useState(new Set([0]));
-	const [touchStart, setTouchStart] = useState(null);
-	const [touchEnd, setTouchEnd] = useState(null);
-	const sliderRef = useRef(null);
-	const minSwipeDistance = 50;
-	useEffect(() => {
-		images.forEach((img, index) => {
-			if (index === 0) return;
-			const preloadImg = new window.Image();
-			preloadImg.src = img.src;
-			preloadImg.onload = () => {
-				setImagesLoaded((prev) => new Set([...prev, index]));
-			};
-		});
-	}, [images]);
-	const onTouchStart = useCallback((e) => {
-		setTouchEnd(null);
-		setTouchStart(e.targetTouches[0].clientX);
-	}, []);
-	const onTouchMove = useCallback((e) => {
-		setTouchEnd(e.targetTouches[0].clientX);
-	}, []);
-	const onTouchEnd = useCallback(() => {
-		if (!touchStart || !touchEnd) return;
-		const distance = touchStart - touchEnd;
-		if (distance > minSwipeDistance) goToNext();
-		if (distance < -minSwipeDistance) goToPrevious();
-	}, [
-		touchStart,
-		touchEnd,
-		goToNext,
-		goToPrevious
-	]);
-	const handleImageLoad = useCallback((index) => {
-		setImagesLoaded((prev) => new Set([...prev, index]));
-	}, []);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			ref: sliderRef,
-			className: cn(aspectRatio, "bg-muted overflow-hidden relative rounded-lg", classNames?.main),
-			onTouchStart,
-			onTouchMove,
-			onTouchEnd,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: cn("absolute inset-0 flex transition-transform duration-300 ease-out", classNames?.slider),
-					style: { transform: `translateX(-${selectedIndex * 100}%)` },
-					children: images.map((img, index) => /* @__PURE__ */ jsxs("div", {
-						className: "w-full h-full shrink-0 relative cursor-zoom-in",
-						onClick: () => setLightboxOpen(true),
-						children: [/* @__PURE__ */ jsx(Image, {
-							src: img.src,
-							alt: img.alt || `${title || "Gallery"} - Image ${index + 1}`,
-							fill: true,
-							className: cn("object-cover transition-opacity duration-300", imagesLoaded.has(index) ? "opacity-100" : "opacity-0", classNames?.mainImage),
-							sizes: "(max-width: 768px) 100vw, 50vw",
-							priority: index === 0,
-							onLoad: () => handleImageLoad(index)
-						}), !imagesLoaded.has(index) && /* @__PURE__ */ jsx("div", {
-							className: "absolute inset-0 flex items-center justify-center bg-muted",
-							children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-muted-foreground/20 border-t-muted-foreground rounded-full animate-spin" })
-						})]
-					}, index))
-				}),
-				badges && badges.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: cn("absolute top-4 left-4 flex flex-col gap-2 z-10", classNames?.badges),
-					children: badges.map((badge, index) => /* @__PURE__ */ jsx("span", {
-						className: cn("px-3 py-1 text-xs font-medium uppercase tracking-wider", classNames?.badge, badge.className),
-						children: badge.label
-					}, index))
-				}),
-				showNav && images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: (e) => {
-						e.stopPropagation();
-						goToPrevious();
-					},
-					className: cn("hidden sm:flex absolute left-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navPrev),
-					"aria-label": "Previous image",
-					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: (e) => {
-						e.stopPropagation();
-						goToNext();
-					},
-					className: cn("hidden sm:flex absolute right-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navNext),
-					"aria-label": "Next image",
-					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
-				})] }),
-				children
-			]
-		})
-	});
-}
-
-//#endregion
-//#region src/components/gallery/gallery-thumbnails.tsx
-function GalleryThumbnails({ showOnMobile = true, orientation = "horizontal", sizeClassName = "w-16 h-20 sm:w-20 sm:h-24", className }) {
-	const { images, selectedIndex, setSelectedIndex, classNames, title } = useGallery();
-	if (images.length <= 1) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex gap-2 sm:gap-3 scrollbar-hide", orientation === "vertical" ? "flex-col overflow-y-auto pr-2" : "overflow-x-auto pb-2", !showOnMobile && "hidden sm:flex", classNames?.thumbnails, className),
-		children: images.map((img, index) => /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: () => setSelectedIndex(index),
-			className: cn("bg-muted overflow-hidden border-2 transition-all duration-200 shrink-0 rounded-md relative", sizeClassName, selectedIndex === index ? cn("border-foreground", classNames?.thumbnailActive) : cn("border-transparent opacity-60 hover:opacity-100", classNames?.thumbnail)),
-			"aria-label": `View image ${index + 1}`,
-			children: /* @__PURE__ */ jsx(Image, {
-				src: img.thumbnail || img.src,
-				alt: img.alt || `${title || "Gallery"} thumbnail ${index + 1}`,
-				fill: true,
-				className: "object-cover",
-				sizes: "80px"
-			})
-		}, index))
-	});
-}
-
 //#endregion
 //#region src/components/gallery/gallery-dots.tsx
 function GalleryDots({ showOnDesktop = false, className }) {
@@ -198,7 +74,8 @@ function GalleryDots({ showOnDesktop = false, className }) {
 			type: "button",
 			onClick: () => setSelectedIndex(index),
 			className: cn("h-2 rounded-full transition-all duration-300", selectedIndex === index ? cn("bg-foreground w-6", classNames?.dotActive) : cn("bg-muted-foreground/30 hover:bg-muted-foreground/50 w-2", classNames?.dot)),
-			"aria-label": `Go to image ${index + 1}`
+			"aria-label": `Go to image ${index + 1}`,
+			"aria-current": selectedIndex === index ? "true" : void 0
 		}, index))
 	});
 }
@@ -436,7 +313,7 @@ function GalleryLightbox({ className }) {
 					})
 				})]
 			}),
-			images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+			images.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: goToPrevious,
 				className: "absolute left-4 top-1/2 -translate-y-1/2 z-50 p-3 rounded-full bg-white/10 hover:bg-white/20 transition-colors",
@@ -475,6 +352,107 @@ function GalleryLightbox({ className }) {
 	});
 }
 
+//#endregion
+//#region src/components/gallery/gallery-main.tsx
+function GalleryMain({ children, badges, showNav = true, aspectRatio = "aspect-[4/5]", className }) {
+	const { images, selectedIndex, setLightboxOpen, goToNext, goToPrevious, classNames, title } = useGallery();
+	const [imagesLoaded, setImagesLoaded] = useState(new Set([0]));
+	const [touchStart, setTouchStart] = useState(null);
+	const [touchEnd, setTouchEnd] = useState(null);
+	const sliderRef = useRef(null);
+	const minSwipeDistance = 50;
+	useEffect(() => {
+		images.forEach((img, index) => {
+			if (index === 0) return;
+			const preloadImg = new window.Image();
+			preloadImg.src = img.src;
+			preloadImg.onload = () => {
+				setImagesLoaded((prev) => new Set([...prev, index]));
+			};
+		});
+	}, [images]);
+	const onTouchStart = useCallback((e) => {
+		setTouchEnd(null);
+		setTouchStart(e.targetTouches[0].clientX);
+	}, []);
+	const onTouchMove = useCallback((e) => {
+		setTouchEnd(e.targetTouches[0].clientX);
+	}, []);
+	const onTouchEnd = useCallback(() => {
+		if (!touchStart || !touchEnd) return;
+		const distance = touchStart - touchEnd;
+		if (distance > minSwipeDistance) goToNext();
+		if (distance < -minSwipeDistance) goToPrevious();
+	}, [
+		touchStart,
+		touchEnd,
+		goToNext,
+		goToPrevious
+	]);
+	const handleImageLoad = useCallback((index) => {
+		setImagesLoaded((prev) => new Set([...prev, index]));
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: sliderRef,
+			className: cn(aspectRatio, "bg-muted overflow-hidden relative rounded-lg", classNames?.main),
+			onTouchStart,
+			onTouchMove,
+			onTouchEnd,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("absolute inset-0 flex transition-transform duration-300 ease-out", classNames?.slider),
+					style: { transform: `translateX(-${selectedIndex * 100}%)` },
+					children: images.map((img, index) => /* @__PURE__ */ jsxs("div", {
+						className: "w-full h-full shrink-0 relative cursor-zoom-in",
+						onClick: () => setLightboxOpen(true),
+						children: [/* @__PURE__ */ jsx(Image, {
+							src: img.src,
+							alt: img.alt || `${title || "Gallery"} - Image ${index + 1}`,
+							fill: true,
+							className: cn("object-cover transition-opacity duration-300", imagesLoaded.has(index) ? "opacity-100" : "opacity-0", classNames?.mainImage),
+							sizes: "(max-width: 768px) 100vw, 50vw",
+							priority: index === 0,
+							onLoad: () => handleImageLoad(index)
+						}), !imagesLoaded.has(index) && /* @__PURE__ */ jsx("div", {
+							className: "absolute inset-0 flex items-center justify-center bg-muted",
+							children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-muted-foreground/20 border-t-muted-foreground rounded-full animate-spin" })
+						})]
+					}, index))
+				}),
+				badges && badges.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: cn("absolute top-4 left-4 flex flex-col gap-2 z-10", classNames?.badges),
+					children: badges.map((badge, index) => /* @__PURE__ */ jsx("span", {
+						className: cn("px-3 py-1 text-xs font-medium uppercase tracking-wider", classNames?.badge, badge.className),
+						children: badge.label
+					}, index))
+				}),
+				showNav && images.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						goToPrevious();
+					},
+					className: cn("hidden sm:flex absolute left-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navPrev),
+					"aria-label": "Previous image",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						goToNext();
+					},
+					className: cn("hidden sm:flex absolute right-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navNext),
+					"aria-label": "Next image",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+				})] }),
+				children
+			]
+		})
+	});
+}
+
 //#endregion
 //#region src/components/gallery/gallery-nav.tsx
 function GalleryNav({ direction, className, children }) {
@@ -490,6 +468,29 @@ function GalleryNav({ direction, className, children }) {
 	});
 }
 
+//#endregion
+//#region src/components/gallery/gallery-thumbnails.tsx
+function GalleryThumbnails({ showOnMobile = true, orientation = "horizontal", sizeClassName = "w-16 h-20 sm:w-20 sm:h-24", className }) {
+	const { images, selectedIndex, setSelectedIndex, classNames, title } = useGallery();
+	if (images.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex gap-2 sm:gap-3 scrollbar-hide", orientation === "vertical" ? "flex-col overflow-y-auto pr-2" : "overflow-x-auto pb-2", !showOnMobile && "hidden sm:flex", classNames?.thumbnails, className),
+		children: images.map((img, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setSelectedIndex(index),
+			className: cn("bg-muted overflow-hidden border-2 transition-all duration-200 shrink-0 rounded-md relative", sizeClassName, selectedIndex === index ? cn("border-foreground", classNames?.thumbnailActive) : cn("border-transparent opacity-60 hover:opacity-100", classNames?.thumbnail)),
+			"aria-label": `View image ${index + 1}`,
+			children: /* @__PURE__ */ jsx(Image, {
+				src: img.thumbnail || img.src,
+				alt: img.alt || `${title || "Gallery"} thumbnail ${index + 1}`,
+				fill: true,
+				className: "object-cover",
+				sizes: "80px"
+			})
+		}, index))
+	});
+}
+
 //#endregion
 //#region src/components/gallery/index.tsx
 function ImageGalleryRoot({ children, images, defaultIndex = 0, classNames, title, onIndexChange, className }) {

package/dist/client/hooks.d.mts

@@ -1,49 +1,24 @@
-import { n as UseBaseSearchReturn, r as useBaseSearch, t as UseBaseSearchConfig } from "../use-base-search-BGgWnWaF.mjs";
-import { n as useKeyboardShortcut, t as UseKeyboardShortcutOptions } from "../use-keyboard-shortcut-_mRCh3QO.mjs";
+import { n as UseBaseSearchReturn, r as useBaseSearch, t as UseBaseSearchConfig } from "../use-base-search-DFC4QKYU.mjs";
+import { n as useKeyboardShortcut, t as UseKeyboardShortcutOptions } from "../use-keyboard-shortcut-Q4CSPzSI.mjs";
 import { RefObject } from "react";
 
-//#region src/hooks/use-mobile.d.ts
-declare function useIsMobile(): boolean;
-//#endregion
-//#region src/hooks/use-media-query.d.ts
-declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
-//#endregion
-//#region src/hooks/use-scroll-detection.d.ts
-declare const useScrollDetection: (ref: RefObject<HTMLDivElement | null>, delay?: number) => {
-  checkScroll: () => void;
-  canScrollLeft: boolean;
-  canScrollRight: boolean;
-  isScrollable: boolean;
-};
-//#endregion
-//#region src/hooks/use-debounce.d.ts
-/**
- * useDebounce — Returns a debounced version of the input value.
- *
- * @example
- * ```tsx
- * const [search, setSearch] = useState("");
- * const debouncedSearch = useDebounce(search, 300);
- *
- * useEffect(() => {
- *   fetchResults(debouncedSearch);
- * }, [debouncedSearch]);
- * ```
- */
-declare function useDebounce<T>(value: T, delay?: number): T;
+//#region src/hooks/create-search-hook.d.ts
+interface CreateSearchHookConfig extends UseBaseSearchConfig {}
 /**
- * useDebouncedCallback — Returns a debounced version of a callback function.
+ * Factory that pre-configures useBaseSearch with typed defaults.
  *
  * @example
- * ```tsx
- * const debouncedSave = useDebouncedCallback((value: string) => {
- *   saveToApi(value);
- * }, 500);
+ * ```ts
+ * const useOrderSearch = createSearchHook({
+ *   basePath: "/dashboard/orders",
+ *   searchFields: { name: "Name", sku: "SKU", barcode: "Barcode" },
+ * });
  *
- * <Input onChange={(e) => debouncedSave(e.target.value)} />
+ * // In component:
+ * const search = useOrderSearch();
  * ```
  */
-declare function useDebouncedCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): (...args: Parameters<T>) => void;
+declare function createSearchHook(config: CreateSearchHookConfig): () => UseBaseSearchReturn;
 //#endregion
 //#region src/hooks/use-copy-to-clipboard.d.ts
 interface UseCopyToClipboardReturn {
@@ -72,6 +47,35 @@ interface UseCopyToClipboardReturn {
  */
 declare function useCopyToClipboard(resetDelay?: number): UseCopyToClipboardReturn;
 //#endregion
+//#region src/hooks/use-debounce.d.ts
+/**
+ * useDebounce — Returns a debounced version of the input value.
+ *
+ * @example
+ * ```tsx
+ * const [search, setSearch] = useState("");
+ * const debouncedSearch = useDebounce(search, 300);
+ *
+ * useEffect(() => {
+ *   fetchResults(debouncedSearch);
+ * }, [debouncedSearch]);
+ * ```
+ */
+declare function useDebounce<T>(value: T, delay?: number): T;
+/**
+ * useDebouncedCallback — Returns a debounced version of a callback function.
+ *
+ * @example
+ * ```tsx
+ * const debouncedSave = useDebouncedCallback((value: string) => {
+ *   saveToApi(value);
+ * }, 500);
+ *
+ * <Input onChange={(e) => debouncedSave(e.target.value)} />
+ * ```
+ */
+declare function useDebouncedCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): (...args: Parameters<T>) => void;
+//#endregion
 //#region src/hooks/use-local-storage.d.ts
 /**
  * useLocalStorage — Persist state in localStorage with type safety and optional expiry.
@@ -92,6 +96,20 @@ declare function useCopyToClipboard(resetDelay?: number): UseCopyToClipboardRetu
  */
 declare function useLocalStorage<T>(key: string, initialValue: T, ttl?: number): [T, (value: T | ((prev: T) => T)) => void, () => void];
 //#endregion
+//#region src/hooks/use-media-query.d.ts
+declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
+//#endregion
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+//#endregion
+//#region src/hooks/use-scroll-detection.d.ts
+declare const useScrollDetection: (ref: RefObject<HTMLDivElement | null>, delay?: number) => {
+  checkScroll: () => void;
+  canScrollLeft: boolean;
+  canScrollRight: boolean;
+  isScrollable: boolean;
+};
+//#endregion
 //#region src/lib/storage.d.ts
 /**
  * A utility module for handling localStorage operations with error handling and SSR safety
@@ -163,4 +181,4 @@ declare const storage: {
   };
 };
 //#endregion
-export { TTL, type UseBaseSearchConfig, type UseBaseSearchReturn, type UseCopyToClipboardReturn, type UseKeyboardShortcutOptions, clearStorage, generateUUID, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useBaseSearch, useCopyToClipboard, useDebounce, useDebouncedCallback, useIsMobile, useKeyboardShortcut, useLocalStorage, useMediaQuery, useScrollDetection };
+export { type CreateSearchHookConfig, TTL, type UseBaseSearchConfig, type UseBaseSearchReturn, type UseCopyToClipboardReturn, type UseKeyboardShortcutOptions, clearStorage, createSearchHook, generateUUID, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useBaseSearch, useCopyToClipboard, useDebounce, useDebouncedCallback, useIsMobile, useKeyboardShortcut, useLocalStorage, useMediaQuery, useScrollDetection };