@vtex/faststore 0.0.10 → 0.0.12

package/dist/particles/gallery/gallery.js

@@ -1,10 +1,104 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { DialogBackdrop, DialogClose, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogViewport } from "../dialog/dialog.js";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/particles/gallery/gallery.tsx
+const GalleryOverflowCountContent = defineContentType({
+	id: "gallery-overflow-count",
+	title: "Gallery Overflow Count",
+	description: "Text and accessible name of the overflow indicator that opens the fullscreen gallery.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			template: {
+				type: "string",
+				title: "Text",
+				description: "The count argument is the number of hidden media items.",
+				format: "icu-message",
+				messageSource: "+{count}",
+				messageArguments: {
+					type: "object",
+					properties: { count: { type: "integer" } }
+				},
+				messageExample: { count: 3 }
+			},
+			ariaLabel: {
+				type: "string",
+				title: "Accessible label",
+				description: "The total argument is the number of media items in the gallery.",
+				format: "icu-message",
+				messageSource: "View all {total} images",
+				messageArguments: {
+					type: "object",
+					properties: { total: { type: "integer" } }
+				},
+				messageExample: { total: 8 }
+			}
+		}
+	}
+});
+const GalleryFullscreenContent = defineContentType({
+	id: "gallery-fullscreen",
+	title: "Gallery Fullscreen",
+	description: "Accessible name of the fullscreen dialog when no GalleryFullscreenTitle is composed.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { title: {
+			type: "string",
+			title: "Fallback title",
+			format: "icu-message",
+			messageSource: "Gallery"
+		} }
+	}
+});
+const GalleryFullscreenTitleContent = defineContentType({
+	id: "gallery-fullscreen-title",
+	title: "Gallery Fullscreen Title",
+	description: "Title of the fullscreen dialog, used when no children are composed.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Title",
+			format: "icu-message",
+			messageSource: "Gallery"
+		} }
+	}
+});
+const GalleryMediaCountContent = defineContentType({
+	id: "gallery-media-count",
+	title: "Gallery Media Count",
+	description: "Position of the selected media item in the gallery.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { template: {
+			type: "string",
+			title: "Text",
+			description: "current is the 1-based position of the selected item; total is the item count.",
+			format: "icu-message",
+			messageSource: "{current} / {total}",
+			messageArguments: {
+				type: "object",
+				properties: {
+					current: { type: "integer" },
+					total: { type: "integer" }
+				}
+			},
+			messageExample: {
+				current: 2,
+				total: 8
+			}
+		} }
+	}
+});
 const GalleryContext = createContext(null);
 const GalleryItemContext = createContext(null);
 const FullscreenTitleRegistryContext = createContext(null);
@@ -190,23 +284,13 @@ const GalleryOverflowCountDefinition = defineComponent({
 	name: "GalleryOverflowCount",
 	importPath: "@vtex/faststore/components",
 	component: GalleryOverflowCount,
+	content: GalleryOverflowCountContent,
 	editor: {
 		label: "Gallery Overflow Count",
 		category: "content"
 	},
-	schema: {
-		template: {
-			type: "string",
-			default: "+{count}",
-			label: "Template"
-		},
-		ariaLabel: {
-			type: "string",
-			default: "View all {total} images",
-			label: "Aria Label"
-		}
-	},
-	guideline: "Overflow indicator. Only renders when isOverflow=true in GalleryItemContext — place alongside GalleryThumbnail inside GalleryThumbnails. Clicking opens fullscreen. Use template=\"+{count}\" to customize the visible label. The rendered button carries an aria-label (default \"View all {total} images\") so screen readers announce the full action, not just the count.",
+	schema: {},
+	guideline: "Overflow indicator. Only renders when isOverflow=true in GalleryItemContext — place alongside GalleryThumbnail inside GalleryThumbnails. Clicking opens fullscreen. Its text and aria-label come from the $content fields template ({count} hidden items) and ariaLabel ({total} items); the aria-label makes screen readers announce the full action, not just the count.",
 	docPath: GALLERY_DOC
 });
 const GalleryMediaDefinition = defineComponent({
@@ -303,24 +387,26 @@ const GalleryFullscreenDefinition = defineComponent({
 	name: "GalleryFullscreen",
 	importPath: "@vtex/faststore/components",
 	component: GalleryFullscreen,
+	content: GalleryFullscreenContent,
 	editor: {
 		label: "Gallery Fullscreen",
 		category: "content"
 	},
 	schema: {},
-	guideline: "Fullscreen overlay controlled by GalleryRoot state. Opens via GalleryOverflowCount, GalleryFullscreenTrigger, or thumbnailOpensFullscreen=true. Wraps a Dialog internally — place GalleryFullscreenClose, GalleryPrevious, GalleryMainMedia, GalleryNext, and optionally GalleryThumbnails as children. If no GalleryFullscreenTitle is composed, a default sr-only \"Gallery\" title is rendered automatically so the dialog always has an accessible name. Must be inside GalleryRoot.",
+	guideline: "Fullscreen overlay controlled by GalleryRoot state. Opens via GalleryOverflowCount, GalleryFullscreenTrigger, or thumbnailOpensFullscreen=true. Wraps a Dialog internally — place GalleryFullscreenClose, GalleryPrevious, GalleryMainMedia, GalleryNext, and optionally GalleryThumbnails as children. If no GalleryFullscreenTitle is composed, an sr-only title from the $content field title is rendered so the dialog always has an accessible name. Must be inside GalleryRoot.",
 	docPath: GALLERY_DOC
 });
 const GalleryFullscreenTitleDefinition = defineComponent({
 	name: "GalleryFullscreenTitle",
 	importPath: "@vtex/faststore/components",
 	component: GalleryFullscreenTitle,
+	content: GalleryFullscreenTitleContent,
 	editor: {
 		label: "Gallery Fullscreen Title",
 		category: "content"
 	},
 	schema: {},
-	guideline: "Accessible title for the fullscreen dialog. Required for screen readers. Use sr-only to hide it visually or omit the class to display it. Must be inside GalleryFullscreen.",
+	guideline: "Accessible title for the fullscreen dialog. Required for screen readers. Renders its children, or the $content field label when it has none. Use sr-only to hide it visually or omit the class to display it. Must be inside GalleryFullscreen.",
 	docPath: GALLERY_DOC
 });
 const GalleryFullscreenCloseDefinition = defineComponent({
@@ -371,16 +457,13 @@ const GalleryMediaCountDefinition = defineComponent({
 	name: "GalleryMediaCount",
 	importPath: "@vtex/faststore/components",
 	component: GalleryMediaCount,
+	content: GalleryMediaCountContent,
 	editor: {
 		label: "Gallery Media Count",
 		category: "content"
 	},
-	schema: { template: {
-		type: "string",
-		default: "{current} / {total}",
-		label: "Template"
-	} },
-	guideline: "Displays the current media position and total count (e.g. \"2 / 10\"). Use {current} and {total} placeholders in template. Place anywhere inside GalleryRoot — typically in GalleryFullscreen or above GalleryMainMedia.",
+	schema: {},
+	guideline: "Displays the current media position and total count (e.g. \"2 / 10\"). The text is the $content field template, an ICU message with current and total arguments. Place anywhere inside GalleryRoot — typically in GalleryFullscreen or above GalleryMainMedia.",
 	docPath: GALLERY_DOC
 });
 function GalleryRoot({ media = [], defaultIndex = 0, selectOnHover = false, thumbnailOpensFullscreen = false, children, ...props }) {
@@ -623,19 +706,18 @@ function GalleryThumbnail({ objectFit = "contain", aspectRatio, style, ...props
 		})
 	});
 }
-function GalleryOverflowCount({ template = "+{count}", ariaLabel = "View all {total} images", ...props }) {
+function GalleryOverflowCount({ $locale, $content, ...props }) {
 	const { media, openFullscreen } = useGallery();
 	const { isOverflow, overflowCount } = useGalleryItem();
+	const messages = useMessageFormatter(GalleryOverflowCountContent, $content);
 	if (!isOverflow) return null;
-	const label = template.replace("{count}", String(overflowCount));
-	const resolvedAriaLabel = ariaLabel.replace("{total}", String(media.length));
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: openFullscreen,
-		"aria-label": resolvedAriaLabel,
+		"aria-label": messages.format("ariaLabel", { total: media.length }),
 		"data-fs-gallery-overflow-count": "",
 		...props,
-		children: label
+		children: messages.format("template", { count: overflowCount })
 	});
 }
 function GalleryMedia({ objectFit = "contain", aspectRatio, videoAutoPlay = false, videoControls = true, clickOpensFullscreen = false, style, ...props }) {
@@ -782,8 +864,9 @@ function GalleryZoomResult({ style, ...props }) {
 		"data-fs-gallery-zoom-result": ""
 	});
 }
-function GalleryFullscreen({ children, ...props }) {
+function GalleryFullscreen({ $locale, $content, children, ...props }) {
 	const { fullscreenOpen, closeFullscreen } = useGallery();
+	const messages = useMessageFormatter(GalleryFullscreenContent, $content);
 	const [hasExplicitTitle, setHasExplicitTitle] = useState(false);
 	const register = useCallback(() => setHasExplicitTitle(true), []);
 	const registry = useMemo(() => ({ register }), [register]);
@@ -805,22 +888,23 @@ function GalleryFullscreen({ children, ...props }) {
 					children: [!hasExplicitTitle && /* @__PURE__ */ jsx(DialogTitle, {
 						className: "sr-only",
 						"data-fs-gallery-fullscreen-title": "",
-						children: "Gallery"
+						children: messages.format("title")
 					}), children]
 				})
 			})
 		})] })
 	});
 }
-function GalleryFullscreenTitle({ children = "Gallery", ...props }) {
+function GalleryFullscreenTitle({ $locale, $content, children, ...props }) {
 	const registry = useContext(FullscreenTitleRegistryContext);
+	const messages = useMessageFormatter(GalleryFullscreenTitleContent, $content);
 	useLayoutEffect(() => {
 		registry?.register();
 	}, [registry]);
 	return /* @__PURE__ */ jsx(DialogTitle, {
 		"data-fs-gallery-fullscreen-title": "",
 		...props,
-		children
+		children: children ?? messages.format("label")
 	});
 }
 function GalleryFullscreenClose({ children, ...props }) {
@@ -886,13 +970,16 @@ function GalleryThumbnailsNext({ step = 1, children, ...props }) {
 		children
 	});
 }
-function GalleryMediaCount({ template = "{current} / {total}", ...props }) {
+function GalleryMediaCount({ $locale, $content, ...props }) {
 	const { selectedIndex, media } = useGallery();
-	const label = template.replace("{current}", String(selectedIndex + 1)).replace("{total}", String(media.length));
+	const messages = useMessageFormatter(GalleryMediaCountContent, $content);
 	return /* @__PURE__ */ jsx("span", {
 		"data-fs-gallery-media-count": "",
 		...props,
-		children: label
+		children: messages.format("template", {
+			current: selectedIndex + 1,
+			total: media.length
+		})
 	});
 }
 const Gallery = {
@@ -915,6 +1002,6 @@ const Gallery = {
 	MediaCount: GalleryMediaCount
 };
 //#endregion
-export { Gallery, GalleryFullscreen, GalleryFullscreenClose, GalleryFullscreenCloseDefinition, GalleryFullscreenDefinition, GalleryFullscreenTitle, GalleryFullscreenTitleDefinition, GalleryItemContext, GalleryMainMedia, GalleryMainMediaDefinition, GalleryMedia, GalleryMediaCount, GalleryMediaCountDefinition, GalleryMediaDefinition, GalleryNext, GalleryNextDefinition, GalleryOverflowCount, GalleryOverflowCountDefinition, GalleryPrevious, GalleryPreviousDefinition, GalleryRoot, GalleryRootDefinition, GalleryThumbnail, GalleryThumbnailDefinition, GalleryThumbnails, GalleryThumbnailsDefinition, GalleryThumbnailsNext, GalleryThumbnailsNextDefinition, GalleryThumbnailsPrevious, GalleryThumbnailsPreviousDefinition, GalleryZoom, GalleryZoomDefinition, GalleryZoomLens, GalleryZoomLensDefinition, GalleryZoomResult, GalleryZoomResultDefinition, useGallery, useGalleryItem };
+export { Gallery, GalleryFullscreen, GalleryFullscreenClose, GalleryFullscreenCloseDefinition, GalleryFullscreenContent, GalleryFullscreenDefinition, GalleryFullscreenTitle, GalleryFullscreenTitleContent, GalleryFullscreenTitleDefinition, GalleryItemContext, GalleryMainMedia, GalleryMainMediaDefinition, GalleryMedia, GalleryMediaCount, GalleryMediaCountContent, GalleryMediaCountDefinition, GalleryMediaDefinition, GalleryNext, GalleryNextDefinition, GalleryOverflowCount, GalleryOverflowCountContent, GalleryOverflowCountDefinition, GalleryPrevious, GalleryPreviousDefinition, GalleryRoot, GalleryRootDefinition, GalleryThumbnail, GalleryThumbnailDefinition, GalleryThumbnails, GalleryThumbnailsDefinition, GalleryThumbnailsNext, GalleryThumbnailsNextDefinition, GalleryThumbnailsPrevious, GalleryThumbnailsPreviousDefinition, GalleryZoom, GalleryZoomDefinition, GalleryZoomLens, GalleryZoomLensDefinition, GalleryZoomResult, GalleryZoomResultDefinition, useGallery, useGalleryItem };
 
 //# sourceMappingURL=gallery.js.map

package/dist/particles/gallery/gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.js","names":[],"sources":["../../../src/particles/gallery/gallery.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  DialogBackdrop,\n  DialogClose,\n  DialogPopup,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n  DialogViewport,\n} from '../dialog/dialog.js';\n\nexport type GalleryMediaType = 'image' | 'video';\n\nexport type GalleryMediaItem = {\n  type: GalleryMediaType;\n  url: string;\n  altText: string;\n  previewImageUrl?: string;\n};\n\nexport type GalleryContextValue = {\n  media: GalleryMediaItem[];\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  fullscreenOpen: boolean;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  selectOnHover: boolean;\n  thumbnailOpensFullscreen: boolean;\n  zoomActive: boolean;\n  setZoomActive: (active: boolean) => void;\n  zoomPosition: { x: number; y: number };\n  setZoomPosition: (pos: { x: number; y: number }) => void;\n  magnification: number;\n  lensSize: number;\n  setZoomConfig: (config: { magnification: number; lensSize: number }) => void;\n  zoomContainerSize: { width: number; height: number };\n  setZoomContainerSize: (size: { width: number; height: number }) => void;\n  thumbnailOffset: number;\n  setThumbnailOffset: (offset: number) => void;\n  thumbnailsWindowSize: number;\n  setThumbnailsWindowSize: (size: number) => void;\n};\n\nexport type GalleryItemContextValue = {\n  item: GalleryMediaItem;\n  index: number;\n  isOverflow: boolean;\n  overflowCount: number;\n};\n\nexport type GalleryRootProps = ComponentPropsWithRef<'div'> & {\n  media?: GalleryMediaItem[];\n  defaultIndex?: number;\n  selectOnHover?: boolean;\n  thumbnailOpensFullscreen?: boolean;\n};\n\nexport type GalleryMainMediaProps = ComponentPropsWithRef<'div'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  aspectRatio?: string;\n  videoAutoPlay?: boolean;\n  videoControls?: boolean;\n  clickOpensFullscreen?: boolean;\n};\n\nexport type GalleryThumbnailsProps = ComponentPropsWithRef<'div'> & {\n  maxVisible?: number;\n  slider?: boolean;\n  animated?: boolean;\n  direction?: 'horizontal' | 'vertical';\n  hideWhenSingle?: boolean;\n  children?: ReactNode;\n};\n\nexport type GalleryThumbnailsPreviousProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  step?: number;\n};\n\nexport type GalleryThumbnailsNextProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  step?: number;\n};\n\nexport type GalleryThumbnailProps = ComponentPropsWithRef<'button'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  aspectRatio?: string;\n};\n\nexport type GalleryOverflowCountProps = ComponentPropsWithRef<'button'> & {\n  template?: string;\n  ariaLabel?: string;\n};\n\nexport type GalleryMediaProps = ComponentPropsWithRef<'div'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  aspectRatio?: string;\n  videoAutoPlay?: boolean;\n  videoControls?: boolean;\n  clickOpensFullscreen?: boolean;\n};\n\nexport type GalleryZoomProps = ComponentPropsWithRef<'div'> & {\n  magnification?: number;\n  lensSize?: number;\n};\n\nexport type GalleryZoomLensProps = ComponentPropsWithRef<'div'>;\n\nexport type GalleryZoomResultProps = ComponentPropsWithRef<'div'>;\n\nexport type GalleryFullscreenProps = ComponentPropsWithRef<'div'> & {\n  children?: ReactNode;\n};\n\nexport type GalleryFullscreenTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type GalleryFullscreenCloseProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n};\n\nexport type GalleryPreviousProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  wrap?: boolean;\n};\n\nexport type GalleryNextProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  wrap?: boolean;\n};\n\nexport type GalleryMediaCountProps = ComponentPropsWithRef<'span'> & {\n  template?: string;\n};\n\nconst GalleryContext = createContext<GalleryContextValue | null>(null);\n\nexport const GalleryItemContext = createContext<GalleryItemContextValue | null>(null);\n\ntype FullscreenTitleRegistry = { register: () => void };\n\nconst FullscreenTitleRegistryContext = createContext<FullscreenTitleRegistry | null>(null);\n\nexport function useGallery(): GalleryContextValue {\n  const ctx = useContext(GalleryContext);\n  if (!ctx) throw new Error('Gallery components must be used inside GalleryRoot.');\n  return ctx;\n}\n\nexport function useGalleryItem(): GalleryItemContextValue {\n  const ctx = useContext(GalleryItemContext);\n  if (!ctx) throw new Error('GalleryThumbnail and GalleryOverflowCount must be used inside GalleryThumbnails.');\n  return ctx;\n}\n\nconst GALLERY_DOC = './gallery.md';\n\nexport const GalleryRootDefinition = defineComponent<GalleryRootProps>({\n  name: 'GalleryRoot',\n  importPath: '@vtex/faststore/components',\n  component: GalleryRoot,\n  editor: { label: 'Gallery Root', category: 'content' },\n  schema: {\n    defaultIndex: { type: 'number', default: 0, label: 'Default Index' },\n    selectOnHover: { type: 'boolean', default: false, label: 'Select on Hover' },\n    thumbnailOpensFullscreen: { type: 'boolean', default: false, label: 'Thumbnail Opens Fullscreen' },\n  },\n  guideline:\n    'Root of the gallery. Manages selected media index, fullscreen state, and zoom state. Compose as: GalleryRoot > (GalleryMainMedia (or GalleryZoom > (GalleryMainMedia + GalleryZoomLens + GalleryZoomResult)) + GalleryThumbnails > [GalleryThumbnail + GalleryOverflowCount] + GalleryFullscreen > [GalleryFullscreenClose + GalleryPrevious + GalleryMainMedia + GalleryNext + GalleryThumbnails]). Set selectOnHover=true for hover-to-preview; thumbnailOpensFullscreen=true to open fullscreen on thumbnail click.',\n});\n\nexport const GalleryMainMediaDefinition = defineComponent<GalleryMainMediaProps>({\n  name: 'GalleryMainMedia',\n  importPath: '@vtex/faststore/components',\n  component: GalleryMainMedia,\n  editor: { label: 'Gallery Main Media', category: 'content' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'contain', label: 'Object Fit' },\n    aspectRatio: { type: 'string', default: '1 / 1', label: 'Aspect Ratio' },\n    videoAutoPlay: { type: 'boolean', default: false, label: 'Video Auto Play' },\n    videoControls: { type: 'boolean', default: true, label: 'Video Controls' },\n    clickOpensFullscreen: { type: 'boolean', default: false, label: 'Click Opens Fullscreen' },\n  },\n  guideline:\n    'Renders the currently selected media item from GalleryRoot context: <img> for images, <video> for videos. Supports swipe gestures (50px threshold) to navigate. Set clickOpensFullscreen=true to open the fullscreen overlay on click. Must be inside GalleryRoot or GalleryZoom.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailsDefinition = defineComponent<GalleryThumbnailsProps>({\n  name: 'GalleryThumbnails',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnails,\n  editor: { label: 'Gallery Thumbnails', category: 'content' },\n  schema: {\n    maxVisible: { type: 'number', label: 'Max Visible' },\n    slider: { type: 'boolean', default: false, label: 'Slider Mode' },\n    animated: { type: 'boolean', default: false, label: 'Animated' },\n    direction: { type: ['horizontal', 'vertical'] as const, default: 'horizontal', label: 'Direction' },\n    hideWhenSingle: { type: 'boolean', default: true, label: 'Hide when single image' },\n  },\n  guideline:\n    'Iterates media items and renders its children once per item. Returns null when there are 0 or 1 media items unless hideWhenSingle={false}. Set maxVisible to cap visible thumbnails. Without slider: last slot gets isOverflow=true for GalleryOverflowCount. With slider=true: window driven by GalleryThumbnailsPrevious/Next. Add animated=true for smooth scroll — also set direction to match the flex axis of the container.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailsPreviousDefinition = defineComponent<GalleryThumbnailsPreviousProps>({\n  name: 'GalleryThumbnailsPrevious',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnailsPrevious,\n  editor: { label: 'Gallery Thumbnails Previous', category: 'content' },\n  schema: {\n    step: { type: 'number', default: 1, label: 'Step' },\n  },\n  guideline:\n    'Scrolls the thumbnail strip backward. Only active when GalleryThumbnails slider=true. Disabled at the first thumbnail. step=1 (default) moves one at a time; pass step equal to maxVisible to jump a full window. Place as sibling of GalleryThumbnails.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailsNextDefinition = defineComponent<GalleryThumbnailsNextProps>({\n  name: 'GalleryThumbnailsNext',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnailsNext,\n  editor: { label: 'Gallery Thumbnails Next', category: 'content' },\n  schema: {\n    step: { type: 'number', default: 1, label: 'Step' },\n  },\n  guideline:\n    'Scrolls the thumbnail strip forward. Only active when GalleryThumbnails slider=true. Disabled at the last visible thumbnail. step=1 (default) moves one at a time; pass step equal to maxVisible to jump a full window. Place as sibling of GalleryThumbnails.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailDefinition = defineComponent<GalleryThumbnailProps>({\n  name: 'GalleryThumbnail',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnail,\n  editor: { label: 'Gallery Thumbnail', category: 'content' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'contain', label: 'Object Fit' },\n    aspectRatio: { type: 'string', default: '1 / 1', label: 'Aspect Ratio' },\n  },\n  guideline:\n    'Thumbnail button for a single media item. Reads from GalleryItemContext — must be inside GalleryThumbnails. Adds data-fs-gallery-thumbnail-selected=\"true\" when active. For videos, renders previewImageUrl as the thumbnail src.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryOverflowCountDefinition = defineComponent<GalleryOverflowCountProps>({\n  name: 'GalleryOverflowCount',\n  importPath: '@vtex/faststore/components',\n  component: GalleryOverflowCount,\n  editor: { label: 'Gallery Overflow Count', category: 'content' },\n  schema: {\n    template: { type: 'string', default: '+{count}', label: 'Template' },\n    ariaLabel: { type: 'string', default: 'View all {total} images', label: 'Aria Label' },\n  },\n  guideline:\n    'Overflow indicator. Only renders when isOverflow=true in GalleryItemContext — place alongside GalleryThumbnail inside GalleryThumbnails. Clicking opens fullscreen. Use template=\"+{count}\" to customize the visible label. The rendered button carries an aria-label (default \"View all {total} images\") so screen readers announce the full action, not just the count.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryMediaDefinition = defineComponent<GalleryMediaProps>({\n  name: 'GalleryMedia',\n  importPath: '@vtex/faststore/components',\n  component: GalleryMedia,\n  editor: { label: 'Gallery Media', category: 'content' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'contain', label: 'Object Fit' },\n    aspectRatio: { type: 'string', default: '1 / 1', label: 'Aspect Ratio' },\n    videoAutoPlay: { type: 'boolean', default: false, label: 'Video Auto Play' },\n    videoControls: { type: 'boolean', default: true, label: 'Video Controls' },\n    clickOpensFullscreen: { type: 'boolean', default: false, label: 'Click Opens Fullscreen' },\n  },\n  guideline:\n    'Full-size media display for items inside GalleryThumbnails. Unlike GalleryThumbnail, renders as a div (not a button) — use for grid layouts and vertical fullscreen stacks. Set clickOpensFullscreen=true to select the item and open fullscreen on click. Must be inside GalleryThumbnails.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryZoomDefinition = defineComponent<GalleryZoomProps>({\n  name: 'GalleryZoom',\n  importPath: '@vtex/faststore/components',\n  component: GalleryZoom,\n  editor: { label: 'Gallery Zoom', category: 'content' },\n  schema: {\n    magnification: { type: 'number', default: 2, label: 'Magnification' },\n    lensSize: { type: 'number', default: 150, label: 'Lens Size (px)' },\n  },\n  guideline:\n    'Zoom container. Wrap GalleryMainMedia inside it to activate zoom on pointer enter (images only, not videos). Place GalleryZoomLens as a sibling of GalleryMainMedia inside GalleryZoom for the cursor indicator. Place GalleryZoomResult anywhere in GalleryRoot — as a sibling of GalleryZoom (side-panel) or absolute inside GalleryZoom (on-image overlay). Set magnification to control zoom level (default 2).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryZoomLensDefinition = defineComponent<GalleryZoomLensProps>({\n  name: 'GalleryZoomLens',\n  importPath: '@vtex/faststore/components',\n  component: GalleryZoomLens,\n  editor: { label: 'Gallery Zoom Lens', category: 'content' },\n  schema: {},\n  guideline:\n    'Cursor focus indicator inside GalleryZoom. Only renders when zoom is active. Must be inside GalleryZoom. Style as absolute-positioned square — uses CSS custom properties --zoom-x, --zoom-y, --lens-size for positioning.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryZoomResultDefinition = defineComponent<GalleryZoomResultProps>({\n  name: 'GalleryZoomResult',\n  importPath: '@vtex/faststore/components',\n  component: GalleryZoomResult,\n  editor: { label: 'Gallery Zoom Result', category: 'content' },\n  schema: {},\n  guideline:\n    'Magnified view driven by cursor position from GalleryZoom context. Only renders when zoom is active on an image. Place as sibling of GalleryZoom for side-panel zoom, or absolute inside GalleryZoom for on-image zoom.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryFullscreenDefinition = defineComponent<GalleryFullscreenProps>({\n  name: 'GalleryFullscreen',\n  importPath: '@vtex/faststore/components',\n  component: GalleryFullscreen,\n  editor: { label: 'Gallery Fullscreen', category: 'content' },\n  schema: {},\n  guideline:\n    'Fullscreen overlay controlled by GalleryRoot state. Opens via GalleryOverflowCount, GalleryFullscreenTrigger, or thumbnailOpensFullscreen=true. Wraps a Dialog internally — place GalleryFullscreenClose, GalleryPrevious, GalleryMainMedia, GalleryNext, and optionally GalleryThumbnails as children. If no GalleryFullscreenTitle is composed, a default sr-only \"Gallery\" title is rendered automatically so the dialog always has an accessible name. Must be inside GalleryRoot.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryFullscreenTitleDefinition = defineComponent<GalleryFullscreenTitleProps>({\n  name: 'GalleryFullscreenTitle',\n  importPath: '@vtex/faststore/components',\n  component: GalleryFullscreenTitle,\n  editor: { label: 'Gallery Fullscreen Title', category: 'content' },\n  schema: {},\n  guideline:\n    'Accessible title for the fullscreen dialog. Required for screen readers. Use sr-only to hide it visually or omit the class to display it. Must be inside GalleryFullscreen.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryFullscreenCloseDefinition = defineComponent<GalleryFullscreenCloseProps>({\n  name: 'GalleryFullscreenClose',\n  importPath: '@vtex/faststore/components',\n  component: GalleryFullscreenClose,\n  editor: { label: 'Gallery Fullscreen Close', category: 'content' },\n  schema: {},\n  guideline:\n    'Closes the fullscreen overlay. Must be inside GalleryFullscreen. Place at the top-right corner. Accepts any children (Icon, text).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryPreviousDefinition = defineComponent<GalleryPreviousProps>({\n  name: 'GalleryPrevious',\n  importPath: '@vtex/faststore/components',\n  component: GalleryPrevious,\n  editor: { label: 'Gallery Previous', category: 'content' },\n  schema: {\n    wrap: { type: 'boolean', default: true, label: 'Wrap Around' },\n  },\n  guideline:\n    'Navigates to the previous media item; wraps to the last by default, or stops at the first with wrap={false}. Use inside GalleryFullscreen or inline for carousel controls. Accepts any children (Icon, text).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryNextDefinition = defineComponent<GalleryNextProps>({\n  name: 'GalleryNext',\n  importPath: '@vtex/faststore/components',\n  component: GalleryNext,\n  editor: { label: 'Gallery Next', category: 'content' },\n  schema: {\n    wrap: { type: 'boolean', default: true, label: 'Wrap Around' },\n  },\n  guideline:\n    'Navigates to the next media item; wraps to the first by default, or stops at the last with wrap={false}. Use inside GalleryFullscreen or inline for carousel controls. Accepts any children (Icon, text).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryMediaCountDefinition = defineComponent<GalleryMediaCountProps>({\n  name: 'GalleryMediaCount',\n  importPath: '@vtex/faststore/components',\n  component: GalleryMediaCount,\n  editor: { label: 'Gallery Media Count', category: 'content' },\n  schema: {\n    template: { type: 'string', default: '{current} / {total}', label: 'Template' },\n  },\n  guideline:\n    'Displays the current media position and total count (e.g. \"2 / 10\"). Use {current} and {total} placeholders in template. Place anywhere inside GalleryRoot — typically in GalleryFullscreen or above GalleryMainMedia.',\n  docPath: GALLERY_DOC,\n});\n\nexport function GalleryRoot({\n  media = [],\n  defaultIndex = 0,\n  selectOnHover = false,\n  thumbnailOpensFullscreen = false,\n  children,\n  ...props\n}: GalleryRootProps) {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [fullscreenOpen, setFullscreenOpen] = useState(false);\n  const [zoomActive, setZoomActive] = useState(false);\n  const [zoomPosition, setZoomPosition] = useState({ x: 0, y: 0 });\n  const [zoomConfig, setZoomConfig] = useState({ magnification: 2, lensSize: 150 });\n  const [zoomContainerSize, setZoomContainerSize] = useState({ width: 0, height: 0 });\n  const [thumbnailOffset, setThumbnailOffset] = useState(0);\n  const [thumbnailsWindowSize, setThumbnailsWindowSize] = useState(0);\n\n  const openFullscreen = useCallback(() => setFullscreenOpen(true), []);\n  const closeFullscreen = useCallback(() => setFullscreenOpen(false), []);\n\n  const ctx = useMemo<GalleryContextValue>(\n    () => ({\n      media,\n      selectedIndex,\n      setSelectedIndex,\n      fullscreenOpen,\n      openFullscreen,\n      closeFullscreen,\n      selectOnHover,\n      thumbnailOpensFullscreen,\n      zoomActive,\n      setZoomActive,\n      zoomPosition,\n      setZoomPosition,\n      magnification: zoomConfig.magnification,\n      lensSize: zoomConfig.lensSize,\n      setZoomConfig,\n      zoomContainerSize,\n      setZoomContainerSize,\n      thumbnailOffset,\n      setThumbnailOffset,\n      thumbnailsWindowSize,\n      setThumbnailsWindowSize,\n    }),\n    [\n      media,\n      selectedIndex,\n      fullscreenOpen,\n      openFullscreen,\n      closeFullscreen,\n      selectOnHover,\n      thumbnailOpensFullscreen,\n      zoomActive,\n      zoomPosition,\n      zoomConfig,\n      zoomContainerSize,\n      thumbnailOffset,\n      thumbnailsWindowSize,\n    ],\n  );\n\n  return (\n    <GalleryContext value={ctx}>\n      <div {...props} data-fs-gallery=\"\">\n        {children}\n      </div>\n    </GalleryContext>\n  );\n}\n\nconst SWIPE_THRESHOLD = 50;\n\nexport function GalleryMainMedia({\n  objectFit = 'contain',\n  aspectRatio,\n  videoAutoPlay = false,\n  videoControls = true,\n  clickOpensFullscreen = false,\n  style,\n  ...props\n}: GalleryMainMediaProps) {\n  const { media, selectedIndex, setSelectedIndex, openFullscreen } = useGallery();\n  const currentItem = media[selectedIndex] ?? media[0];\n  const pointerStartX = useRef<number | null>(null);\n\n  function handlePointerDown(e: React.PointerEvent) {\n    pointerStartX.current = e.clientX;\n  }\n\n  function handlePointerUp(e: React.PointerEvent) {\n    if (pointerStartX.current === null) return;\n    const delta = e.clientX - pointerStartX.current;\n    pointerStartX.current = null;\n\n    if (Math.abs(delta) < SWIPE_THRESHOLD) {\n      if (clickOpensFullscreen) openFullscreen();\n      return;\n    }\n    if (media.length === 0) return;\n    if (delta < 0) {\n      setSelectedIndex(selectedIndex < media.length - 1 ? selectedIndex + 1 : 0);\n    } else {\n      setSelectedIndex(selectedIndex > 0 ? selectedIndex - 1 : media.length - 1);\n    }\n  }\n\n  if (!currentItem) {\n    return <div {...props} data-fs-gallery-main-media=\"\" />;\n  }\n\n  if (currentItem.type === 'video') {\n    return (\n      <div {...props} data-fs-gallery-main-media=\"\" data-fs-gallery-main-media-type=\"video\">\n        <video\n          src={currentItem.url}\n          controls={videoControls}\n          autoPlay={videoAutoPlay}\n          poster={currentItem.previewImageUrl}\n          style={{ objectFit, aspectRatio, ...style } as React.CSSProperties}\n        >\n          <track kind=\"captions\" />\n        </video>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...props}\n      data-fs-gallery-main-media=\"\"\n      data-fs-gallery-main-media-type=\"image\"\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      style={{ touchAction: 'pan-y', ...style }}\n    >\n      <img\n        src={currentItem.url}\n        alt={currentItem.altText}\n        style={{ display: 'block', width: '100%', objectFit, aspectRatio } as React.CSSProperties}\n        draggable={false}\n      />\n    </div>\n  );\n}\n\nexport function GalleryThumbnails({ hideWhenSingle = true, ...rest }: GalleryThumbnailsProps) {\n  const { media } = useGallery();\n  if (hideWhenSingle && media.length <= 1) return null;\n  return <GalleryThumbnailsInner {...rest} />;\n}\n\nfunction GalleryThumbnailsInner({\n  maxVisible,\n  slider = false,\n  animated = false,\n  direction = 'horizontal',\n  children,\n  style,\n  ...props\n}: Omit<GalleryThumbnailsProps, 'hideWhenSingle'>) {\n  const { media, thumbnailOffset, setThumbnailsWindowSize } = useGallery();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [containerSize, setContainerSize] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (slider && maxVisible != null) setThumbnailsWindowSize(maxVisible);\n  }, [slider, maxVisible, setThumbnailsWindowSize]);\n\n  // Measure the exact size needed to show maxVisible items so overflow:hidden clips correctly.\n  // useLayoutEffect runs after DOM commit but before paint — no visual flash.\n  useLayoutEffect(() => {\n    if (!animated || !slider || maxVisible == null || !trackRef.current) return;\n    const lastVisible = trackRef.current.children[maxVisible - 1] as HTMLElement | undefined;\n    if (!lastVisible) return;\n    const size =\n      direction === 'horizontal'\n        ? lastVisible.offsetLeft + lastVisible.offsetWidth\n        : lastVisible.offsetTop + lastVisible.offsetHeight;\n    setContainerSize(size);\n  }, [animated, slider, maxVisible, direction]);\n\n  useEffect(() => {\n    if (!animated || !slider || !trackRef.current) return;\n    const target = trackRef.current.children[thumbnailOffset] as HTMLElement | undefined;\n    if (!target) return;\n    trackRef.current.scrollTo({\n      left: direction === 'horizontal' ? target.offsetLeft : 0,\n      top: direction === 'vertical' ? target.offsetTop : 0,\n      behavior: 'smooth',\n    });\n  }, [thumbnailOffset, animated, slider, direction]);\n\n  const visibleItems = (() => {\n    if (animated && slider) return media; // render all; scroll handles visibility\n    if (maxVisible == null) return media;\n    if (slider) return media.slice(thumbnailOffset, thumbnailOffset + maxVisible);\n    // overflow mode: show first maxVisible items, last slot is overflow\n    return media.slice(0, maxVisible);\n  })();\n\n  const containerStyle: React.CSSProperties =\n    animated && slider\n      ? {\n          overflow: 'hidden',\n          position: 'relative',\n          ...(direction === 'horizontal' && containerSize != null ? { width: containerSize } : {}),\n          ...(direction === 'vertical' && containerSize != null ? { height: containerSize } : {}),\n          ...style,\n        }\n      : { ...style };\n\n  return (\n    <div {...props} ref={trackRef} style={containerStyle} data-fs-gallery-thumbnails=\"\">\n      {visibleItems.map((item, slotIndex) => {\n        const index = animated && slider ? slotIndex : slider ? thumbnailOffset + slotIndex : slotIndex;\n        const isOverflow = !slider && maxVisible != null && media.length > maxVisible && slotIndex === maxVisible - 1;\n        const overflowCount = isOverflow ? media.length - maxVisible + 1 : 0;\n\n        return (\n          <GalleryItemContext key={index} value={{ item, index, isOverflow, overflowCount }}>\n            {children}\n          </GalleryItemContext>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function GalleryThumbnail({ objectFit = 'contain', aspectRatio, style, ...props }: GalleryThumbnailProps) {\n  const { selectedIndex, setSelectedIndex, openFullscreen, selectOnHover, thumbnailOpensFullscreen } = useGallery();\n  const { item, index, isOverflow } = useGalleryItem();\n\n  const thumbSrc = item.type === 'video' ? (item.previewImageUrl ?? '') : item.url;\n\n  function handleClick() {\n    setSelectedIndex(index);\n    if (thumbnailOpensFullscreen || isOverflow) openFullscreen();\n  }\n\n  function handlePointerEnter() {\n    if (selectOnHover && !isOverflow) setSelectedIndex(index);\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      data-fs-gallery-thumbnail=\"\"\n      data-fs-gallery-thumbnail-selected={String(index === selectedIndex)}\n      data-fs-gallery-thumbnail-type={item.type}\n      {...props}\n    >\n      <img\n        src={thumbSrc}\n        alt={item.altText}\n        style={\n          { display: 'block', width: '100%', height: '100%', objectFit, aspectRatio, ...style } as React.CSSProperties\n        }\n      />\n    </button>\n  );\n}\n\nexport function GalleryOverflowCount({\n  template = '+{count}',\n  ariaLabel = 'View all {total} images',\n  ...props\n}: GalleryOverflowCountProps) {\n  const { media, openFullscreen } = useGallery();\n  const { isOverflow, overflowCount } = useGalleryItem();\n\n  if (!isOverflow) return null;\n\n  const label = template.replace('{count}', String(overflowCount));\n  const resolvedAriaLabel = ariaLabel.replace('{total}', String(media.length));\n\n  return (\n    <button\n      type=\"button\"\n      onClick={openFullscreen}\n      aria-label={resolvedAriaLabel}\n      data-fs-gallery-overflow-count=\"\"\n      {...props}\n    >\n      {label}\n    </button>\n  );\n}\n\nexport function GalleryMedia({\n  objectFit = 'contain',\n  aspectRatio,\n  videoAutoPlay = false,\n  videoControls = true,\n  clickOpensFullscreen = false,\n  style,\n  ...props\n}: GalleryMediaProps) {\n  const { setSelectedIndex, openFullscreen } = useGallery();\n  const { item, index } = useGalleryItem();\n\n  function handleClick() {\n    setSelectedIndex(index);\n    openFullscreen();\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') handleClick();\n  }\n\n  const interactiveProps = clickOpensFullscreen\n    ? { onClick: handleClick, onKeyDown: handleKeyDown, role: 'button' as const, tabIndex: 0 }\n    : {};\n\n  const wrapperStyle: React.CSSProperties = {\n    ...style,\n    ...(aspectRatio ? { aspectRatio, position: 'relative' } : {}),\n  };\n  const mediaStyle: React.CSSProperties = aspectRatio\n    ? { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit }\n    : { display: 'block', width: '100%', height: '100%', objectFit };\n\n  if (item.type === 'video') {\n    return (\n      <div\n        {...props}\n        {...interactiveProps}\n        style={wrapperStyle}\n        data-fs-gallery-media-item=\"\"\n        data-fs-gallery-media-item-type=\"video\"\n      >\n        <video\n          src={item.url}\n          controls={videoControls}\n          autoPlay={videoAutoPlay}\n          poster={item.previewImageUrl}\n          style={mediaStyle as React.CSSProperties}\n        >\n          <track kind=\"captions\" />\n        </video>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...props}\n      {...interactiveProps}\n      style={wrapperStyle}\n      data-fs-gallery-media-item=\"\"\n      data-fs-gallery-media-item-type=\"image\"\n    >\n      <img src={item.url} alt={item.altText} style={mediaStyle as React.CSSProperties} draggable={false} />\n    </div>\n  );\n}\n\nexport function GalleryZoom({ magnification = 2, lensSize = 150, children, ...props }: GalleryZoomProps) {\n  const { media, selectedIndex, setZoomActive, setZoomPosition, setZoomConfig, setZoomContainerSize } = useGallery();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const currentItem = media[selectedIndex];\n  const isImage = currentItem?.type === 'image';\n\n  function handlePointerMove(e: React.PointerEvent) {\n    if (!containerRef.current || !isImage) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = (e.clientY - rect.top) / rect.height;\n    setZoomPosition({ x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)) });\n  }\n\n  function handlePointerEnter() {\n    setZoomConfig({ magnification, lensSize });\n    if (containerRef.current) {\n      const rect = containerRef.current.getBoundingClientRect();\n      setZoomContainerSize({ width: rect.width, height: rect.height });\n    }\n    if (isImage) setZoomActive(true);\n  }\n\n  function handlePointerLeave() {\n    setZoomActive(false);\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      {...props}\n      onPointerMove={handlePointerMove}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      data-fs-gallery-zoom=\"\"\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function GalleryZoomLens({ style, ...props }: GalleryZoomLensProps) {\n  const { zoomActive, zoomPosition, lensSize, zoomContainerSize } = useGallery();\n\n  if (!zoomActive) return null;\n\n  // Center the lens on the cursor, then clamp so the full square stays inside the container\n  // (snaps at the edges instead of overflowing the image).\n  const { width, height } = zoomContainerSize;\n  const maxLeft = Math.max(0, width - lensSize);\n  const maxTop = Math.max(0, height - lensSize);\n  const left = width > 0 ? Math.min(Math.max(zoomPosition.x * width - lensSize / 2, 0), maxLeft) : 0;\n  const top = height > 0 ? Math.min(Math.max(zoomPosition.y * height - lensSize / 2, 0), maxTop) : 0;\n\n  const lensStyle: React.CSSProperties = {\n    top,\n    left,\n    width: lensSize,\n    height: lensSize,\n    ...style,\n  };\n\n  return <div {...props} style={lensStyle} data-fs-gallery-zoom-lens=\"\" />;\n}\n\nexport function GalleryZoomResult({ style, ...props }: GalleryZoomResultProps) {\n  const { media, selectedIndex, zoomActive, zoomPosition, magnification } = useGallery();\n  const currentItem = media[selectedIndex];\n  const isVisible = zoomActive && !!currentItem && currentItem.type === 'image';\n\n  // Always renders to prevent layout shifts in flex/grid containers.\n  // Returning null when inactive would change the container dimensions and\n  // trigger pointerleave on GalleryZoom, causing a flicker loop.\n  const resultStyle: React.CSSProperties = isVisible\n    ? {\n        backgroundImage: `url(${currentItem.url})`,\n        backgroundSize: `${magnification * 100}%`,\n        backgroundPosition: `${zoomPosition.x * 100}% ${zoomPosition.y * 100}%`,\n        backgroundRepeat: 'no-repeat',\n        ...style,\n      }\n    : { visibility: 'hidden', ...style };\n\n  return <div {...props} style={resultStyle} data-fs-gallery-zoom-result=\"\" />;\n}\n\nexport function GalleryFullscreen({ children, ...props }: GalleryFullscreenProps) {\n  const { fullscreenOpen, closeFullscreen } = useGallery();\n  const [hasExplicitTitle, setHasExplicitTitle] = useState(false);\n  const register = useCallback(() => setHasExplicitTitle(true), []);\n  const registry = useMemo<FullscreenTitleRegistry>(() => ({ register }), [register]);\n\n  return (\n    <DialogRoot\n      open={fullscreenOpen}\n      onOpenChange={(open) => {\n        if (!open) closeFullscreen();\n      }}\n    >\n      <DialogPortal>\n        <DialogBackdrop className=\"fixed inset-0 bg-black/80\" data-fs-gallery-fullscreen-backdrop=\"\" />\n        <DialogViewport className=\"fixed inset-0 flex items-center justify-center\">\n          <DialogPopup {...props} data-fs-gallery-fullscreen=\"\">\n            <FullscreenTitleRegistryContext.Provider value={registry}>\n              {!hasExplicitTitle && (\n                <DialogTitle className=\"sr-only\" data-fs-gallery-fullscreen-title=\"\">\n                  Gallery\n                </DialogTitle>\n              )}\n              {children}\n            </FullscreenTitleRegistryContext.Provider>\n          </DialogPopup>\n        </DialogViewport>\n      </DialogPortal>\n    </DialogRoot>\n  );\n}\n\nexport function GalleryFullscreenTitle({ children = 'Gallery', ...props }: GalleryFullscreenTitleProps) {\n  const registry = useContext(FullscreenTitleRegistryContext);\n  useLayoutEffect(() => {\n    registry?.register();\n  }, [registry]);\n  return (\n    <DialogTitle data-fs-gallery-fullscreen-title=\"\" {...props}>\n      {children}\n    </DialogTitle>\n  );\n}\n\nexport function GalleryFullscreenClose({ children, ...props }: GalleryFullscreenCloseProps) {\n  return (\n    <DialogClose data-fs-gallery-fullscreen-close=\"\" {...props}>\n      {children}\n    </DialogClose>\n  );\n}\n\nexport function GalleryPrevious({ children, wrap = true, ...props }: GalleryPreviousProps) {\n  const { media, selectedIndex, setSelectedIndex } = useGallery();\n\n  function handleClick() {\n    if (media.length === 0) return;\n    if (selectedIndex > 0) {\n      setSelectedIndex(selectedIndex - 1);\n    } else if (wrap) {\n      setSelectedIndex(media.length - 1);\n    }\n    // wrap === false at index 0 → no-op\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={media.length === 0 || (!wrap && selectedIndex === 0)}\n      onClick={handleClick}\n      data-fs-gallery-previous=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryNext({ children, wrap = true, ...props }: GalleryNextProps) {\n  const { media, selectedIndex, setSelectedIndex } = useGallery();\n\n  function handleClick() {\n    if (media.length === 0) return;\n    if (selectedIndex < media.length - 1) {\n      setSelectedIndex(selectedIndex + 1);\n    } else if (wrap) {\n      setSelectedIndex(0);\n    }\n    // wrap === false at last index → no-op\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={media.length === 0 || (!wrap && selectedIndex === media.length - 1)}\n      onClick={handleClick}\n      data-fs-gallery-next=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryThumbnailsPrevious({ step = 1, children, ...props }: GalleryThumbnailsPreviousProps) {\n  const { thumbnailOffset, setThumbnailOffset } = useGallery();\n  const isDisabled = thumbnailOffset === 0;\n  return (\n    <button\n      type=\"button\"\n      disabled={isDisabled}\n      onClick={() => setThumbnailOffset(Math.max(0, thumbnailOffset - step))}\n      data-fs-gallery-thumbnails-previous=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryThumbnailsNext({ step = 1, children, ...props }: GalleryThumbnailsNextProps) {\n  const { media, thumbnailOffset, setThumbnailOffset, thumbnailsWindowSize } = useGallery();\n  const isDisabled = thumbnailsWindowSize > 0 && thumbnailOffset + thumbnailsWindowSize >= media.length;\n  const maxOffset = Math.max(0, media.length - thumbnailsWindowSize);\n\n  return (\n    <button\n      type=\"button\"\n      disabled={isDisabled}\n      onClick={() => setThumbnailOffset(Math.min(maxOffset, thumbnailOffset + step))}\n      data-fs-gallery-thumbnails-next=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryMediaCount({ template = '{current} / {total}', ...props }: GalleryMediaCountProps) {\n  const { selectedIndex, media } = useGallery();\n  const label = template.replace('{current}', String(selectedIndex + 1)).replace('{total}', String(media.length));\n\n  return (\n    <span data-fs-gallery-media-count=\"\" {...props}>\n      {label}\n    </span>\n  );\n}\n\nexport const Gallery = {\n  Root: GalleryRoot,\n  MainMedia: GalleryMainMedia,\n  Media: GalleryMedia,\n  Thumbnails: GalleryThumbnails,\n  ThumbnailsPrevious: GalleryThumbnailsPrevious,\n  ThumbnailsNext: GalleryThumbnailsNext,\n  Thumbnail: GalleryThumbnail,\n  OverflowCount: GalleryOverflowCount,\n  Zoom: GalleryZoom,\n  ZoomLens: GalleryZoomLens,\n  ZoomResult: GalleryZoomResult,\n  Fullscreen: GalleryFullscreen,\n  FullscreenTitle: GalleryFullscreenTitle,\n  FullscreenClose: GalleryFullscreenClose,\n  Previous: GalleryPrevious,\n  Next: GalleryNext,\n  MediaCount: GalleryMediaCount,\n};\n"],"mappings":"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"}
+{"version":3,"file":"gallery.js","names":[],"sources":["../../../src/particles/gallery/gallery.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport {\n  DialogBackdrop,\n  DialogClose,\n  DialogPopup,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n  DialogViewport,\n} from '../dialog/dialog.js';\n\nexport const GalleryOverflowCountContent = defineContentType({\n  id: 'gallery-overflow-count',\n  title: 'Gallery Overflow Count',\n  description: 'Text and accessible name of the overflow indicator that opens the fullscreen gallery.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      template: {\n        type: 'string',\n        title: 'Text',\n        description: 'The count argument is the number of hidden media items.',\n        format: 'icu-message',\n        messageSource: '+{count}',\n        messageArguments: { type: 'object', properties: { count: { type: 'integer' } } },\n        messageExample: { count: 3 },\n      },\n      ariaLabel: {\n        type: 'string',\n        title: 'Accessible label',\n        description: 'The total argument is the number of media items in the gallery.',\n        format: 'icu-message',\n        messageSource: 'View all {total} images',\n        messageArguments: { type: 'object', properties: { total: { type: 'integer' } } },\n        messageExample: { total: 8 },\n      },\n    },\n  },\n});\n\nexport const GalleryFullscreenContent = defineContentType({\n  id: 'gallery-fullscreen',\n  title: 'Gallery Fullscreen',\n  description: 'Accessible name of the fullscreen dialog when no GalleryFullscreenTitle is composed.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      title: { type: 'string', title: 'Fallback title', format: 'icu-message', messageSource: 'Gallery' },\n    },\n  },\n});\n\nexport const GalleryFullscreenTitleContent = defineContentType({\n  id: 'gallery-fullscreen-title',\n  title: 'Gallery Fullscreen Title',\n  description: 'Title of the fullscreen dialog, used when no children are composed.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Title', format: 'icu-message', messageSource: 'Gallery' },\n    },\n  },\n});\n\nexport const GalleryMediaCountContent = defineContentType({\n  id: 'gallery-media-count',\n  title: 'Gallery Media Count',\n  description: 'Position of the selected media item in the gallery.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      template: {\n        type: 'string',\n        title: 'Text',\n        description: 'current is the 1-based position of the selected item; total is the item count.',\n        format: 'icu-message',\n        messageSource: '{current} / {total}',\n        messageArguments: {\n          type: 'object',\n          properties: { current: { type: 'integer' }, total: { type: 'integer' } },\n        },\n        messageExample: { current: 2, total: 8 },\n      },\n    },\n  },\n});\n\nexport type GalleryMediaType = 'image' | 'video';\n\nexport type GalleryMediaItem = {\n  type: GalleryMediaType;\n  url: string;\n  altText: string;\n  previewImageUrl?: string;\n};\n\nexport type GalleryContextValue = {\n  media: GalleryMediaItem[];\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  fullscreenOpen: boolean;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  selectOnHover: boolean;\n  thumbnailOpensFullscreen: boolean;\n  zoomActive: boolean;\n  setZoomActive: (active: boolean) => void;\n  zoomPosition: { x: number; y: number };\n  setZoomPosition: (pos: { x: number; y: number }) => void;\n  magnification: number;\n  lensSize: number;\n  setZoomConfig: (config: { magnification: number; lensSize: number }) => void;\n  zoomContainerSize: { width: number; height: number };\n  setZoomContainerSize: (size: { width: number; height: number }) => void;\n  thumbnailOffset: number;\n  setThumbnailOffset: (offset: number) => void;\n  thumbnailsWindowSize: number;\n  setThumbnailsWindowSize: (size: number) => void;\n};\n\nexport type GalleryItemContextValue = {\n  item: GalleryMediaItem;\n  index: number;\n  isOverflow: boolean;\n  overflowCount: number;\n};\n\nexport type GalleryRootProps = ComponentPropsWithRef<'div'> & {\n  media?: GalleryMediaItem[];\n  defaultIndex?: number;\n  selectOnHover?: boolean;\n  thumbnailOpensFullscreen?: boolean;\n};\n\nexport type GalleryMainMediaProps = ComponentPropsWithRef<'div'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  aspectRatio?: string;\n  videoAutoPlay?: boolean;\n  videoControls?: boolean;\n  clickOpensFullscreen?: boolean;\n};\n\nexport type GalleryThumbnailsProps = ComponentPropsWithRef<'div'> & {\n  maxVisible?: number;\n  slider?: boolean;\n  animated?: boolean;\n  direction?: 'horizontal' | 'vertical';\n  hideWhenSingle?: boolean;\n  children?: ReactNode;\n};\n\nexport type GalleryThumbnailsPreviousProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  step?: number;\n};\n\nexport type GalleryThumbnailsNextProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  step?: number;\n};\n\nexport type GalleryThumbnailProps = ComponentPropsWithRef<'button'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  aspectRatio?: string;\n};\n\nexport type GalleryOverflowCountProps = ComponentPropsWithRef<'button'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof GalleryOverflowCountContent>;\n  };\n\nexport type GalleryMediaProps = ComponentPropsWithRef<'div'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  aspectRatio?: string;\n  videoAutoPlay?: boolean;\n  videoControls?: boolean;\n  clickOpensFullscreen?: boolean;\n};\n\nexport type GalleryZoomProps = ComponentPropsWithRef<'div'> & {\n  magnification?: number;\n  lensSize?: number;\n};\n\nexport type GalleryZoomLensProps = ComponentPropsWithRef<'div'>;\n\nexport type GalleryZoomResultProps = ComponentPropsWithRef<'div'>;\n\nexport type GalleryFullscreenProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    children?: ReactNode;\n    $content?: ContentValue<typeof GalleryFullscreenContent>;\n  };\n\nexport type GalleryFullscreenTitleProps = ComponentPropsWithRef<'h2'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof GalleryFullscreenTitleContent>;\n  };\n\nexport type GalleryFullscreenCloseProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n};\n\nexport type GalleryPreviousProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  wrap?: boolean;\n};\n\nexport type GalleryNextProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n  wrap?: boolean;\n};\n\nexport type GalleryMediaCountProps = ComponentPropsWithRef<'span'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof GalleryMediaCountContent>;\n  };\n\nconst GalleryContext = createContext<GalleryContextValue | null>(null);\n\nexport const GalleryItemContext = createContext<GalleryItemContextValue | null>(null);\n\ntype FullscreenTitleRegistry = { register: () => void };\n\nconst FullscreenTitleRegistryContext = createContext<FullscreenTitleRegistry | null>(null);\n\nexport function useGallery(): GalleryContextValue {\n  const ctx = useContext(GalleryContext);\n  if (!ctx) throw new Error('Gallery components must be used inside GalleryRoot.');\n  return ctx;\n}\n\nexport function useGalleryItem(): GalleryItemContextValue {\n  const ctx = useContext(GalleryItemContext);\n  if (!ctx) throw new Error('GalleryThumbnail and GalleryOverflowCount must be used inside GalleryThumbnails.');\n  return ctx;\n}\n\nconst GALLERY_DOC = './gallery.md';\n\nexport const GalleryRootDefinition = defineComponent<GalleryRootProps>({\n  name: 'GalleryRoot',\n  importPath: '@vtex/faststore/components',\n  component: GalleryRoot,\n  editor: { label: 'Gallery Root', category: 'content' },\n  schema: {\n    defaultIndex: { type: 'number', default: 0, label: 'Default Index' },\n    selectOnHover: { type: 'boolean', default: false, label: 'Select on Hover' },\n    thumbnailOpensFullscreen: { type: 'boolean', default: false, label: 'Thumbnail Opens Fullscreen' },\n  },\n  guideline:\n    'Root of the gallery. Manages selected media index, fullscreen state, and zoom state. Compose as: GalleryRoot > (GalleryMainMedia (or GalleryZoom > (GalleryMainMedia + GalleryZoomLens + GalleryZoomResult)) + GalleryThumbnails > [GalleryThumbnail + GalleryOverflowCount] + GalleryFullscreen > [GalleryFullscreenClose + GalleryPrevious + GalleryMainMedia + GalleryNext + GalleryThumbnails]). Set selectOnHover=true for hover-to-preview; thumbnailOpensFullscreen=true to open fullscreen on thumbnail click.',\n});\n\nexport const GalleryMainMediaDefinition = defineComponent<GalleryMainMediaProps>({\n  name: 'GalleryMainMedia',\n  importPath: '@vtex/faststore/components',\n  component: GalleryMainMedia,\n  editor: { label: 'Gallery Main Media', category: 'content' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'contain', label: 'Object Fit' },\n    aspectRatio: { type: 'string', default: '1 / 1', label: 'Aspect Ratio' },\n    videoAutoPlay: { type: 'boolean', default: false, label: 'Video Auto Play' },\n    videoControls: { type: 'boolean', default: true, label: 'Video Controls' },\n    clickOpensFullscreen: { type: 'boolean', default: false, label: 'Click Opens Fullscreen' },\n  },\n  guideline:\n    'Renders the currently selected media item from GalleryRoot context: <img> for images, <video> for videos. Supports swipe gestures (50px threshold) to navigate. Set clickOpensFullscreen=true to open the fullscreen overlay on click. Must be inside GalleryRoot or GalleryZoom.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailsDefinition = defineComponent<GalleryThumbnailsProps>({\n  name: 'GalleryThumbnails',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnails,\n  editor: { label: 'Gallery Thumbnails', category: 'content' },\n  schema: {\n    maxVisible: { type: 'number', label: 'Max Visible' },\n    slider: { type: 'boolean', default: false, label: 'Slider Mode' },\n    animated: { type: 'boolean', default: false, label: 'Animated' },\n    direction: { type: ['horizontal', 'vertical'] as const, default: 'horizontal', label: 'Direction' },\n    hideWhenSingle: { type: 'boolean', default: true, label: 'Hide when single image' },\n  },\n  guideline:\n    'Iterates media items and renders its children once per item. Returns null when there are 0 or 1 media items unless hideWhenSingle={false}. Set maxVisible to cap visible thumbnails. Without slider: last slot gets isOverflow=true for GalleryOverflowCount. With slider=true: window driven by GalleryThumbnailsPrevious/Next. Add animated=true for smooth scroll — also set direction to match the flex axis of the container.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailsPreviousDefinition = defineComponent<GalleryThumbnailsPreviousProps>({\n  name: 'GalleryThumbnailsPrevious',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnailsPrevious,\n  editor: { label: 'Gallery Thumbnails Previous', category: 'content' },\n  schema: {\n    step: { type: 'number', default: 1, label: 'Step' },\n  },\n  guideline:\n    'Scrolls the thumbnail strip backward. Only active when GalleryThumbnails slider=true. Disabled at the first thumbnail. step=1 (default) moves one at a time; pass step equal to maxVisible to jump a full window. Place as sibling of GalleryThumbnails.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailsNextDefinition = defineComponent<GalleryThumbnailsNextProps>({\n  name: 'GalleryThumbnailsNext',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnailsNext,\n  editor: { label: 'Gallery Thumbnails Next', category: 'content' },\n  schema: {\n    step: { type: 'number', default: 1, label: 'Step' },\n  },\n  guideline:\n    'Scrolls the thumbnail strip forward. Only active when GalleryThumbnails slider=true. Disabled at the last visible thumbnail. step=1 (default) moves one at a time; pass step equal to maxVisible to jump a full window. Place as sibling of GalleryThumbnails.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryThumbnailDefinition = defineComponent<GalleryThumbnailProps>({\n  name: 'GalleryThumbnail',\n  importPath: '@vtex/faststore/components',\n  component: GalleryThumbnail,\n  editor: { label: 'Gallery Thumbnail', category: 'content' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'contain', label: 'Object Fit' },\n    aspectRatio: { type: 'string', default: '1 / 1', label: 'Aspect Ratio' },\n  },\n  guideline:\n    'Thumbnail button for a single media item. Reads from GalleryItemContext — must be inside GalleryThumbnails. Adds data-fs-gallery-thumbnail-selected=\"true\" when active. For videos, renders previewImageUrl as the thumbnail src.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryOverflowCountDefinition = defineComponent<GalleryOverflowCountProps>({\n  name: 'GalleryOverflowCount',\n  importPath: '@vtex/faststore/components',\n  component: GalleryOverflowCount,\n  content: GalleryOverflowCountContent,\n  editor: { label: 'Gallery Overflow Count', category: 'content' },\n  schema: {},\n  guideline:\n    'Overflow indicator. Only renders when isOverflow=true in GalleryItemContext — place alongside GalleryThumbnail inside GalleryThumbnails. Clicking opens fullscreen. Its text and aria-label come from the $content fields template ({count} hidden items) and ariaLabel ({total} items); the aria-label makes screen readers announce the full action, not just the count.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryMediaDefinition = defineComponent<GalleryMediaProps>({\n  name: 'GalleryMedia',\n  importPath: '@vtex/faststore/components',\n  component: GalleryMedia,\n  editor: { label: 'Gallery Media', category: 'content' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'contain', label: 'Object Fit' },\n    aspectRatio: { type: 'string', default: '1 / 1', label: 'Aspect Ratio' },\n    videoAutoPlay: { type: 'boolean', default: false, label: 'Video Auto Play' },\n    videoControls: { type: 'boolean', default: true, label: 'Video Controls' },\n    clickOpensFullscreen: { type: 'boolean', default: false, label: 'Click Opens Fullscreen' },\n  },\n  guideline:\n    'Full-size media display for items inside GalleryThumbnails. Unlike GalleryThumbnail, renders as a div (not a button) — use for grid layouts and vertical fullscreen stacks. Set clickOpensFullscreen=true to select the item and open fullscreen on click. Must be inside GalleryThumbnails.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryZoomDefinition = defineComponent<GalleryZoomProps>({\n  name: 'GalleryZoom',\n  importPath: '@vtex/faststore/components',\n  component: GalleryZoom,\n  editor: { label: 'Gallery Zoom', category: 'content' },\n  schema: {\n    magnification: { type: 'number', default: 2, label: 'Magnification' },\n    lensSize: { type: 'number', default: 150, label: 'Lens Size (px)' },\n  },\n  guideline:\n    'Zoom container. Wrap GalleryMainMedia inside it to activate zoom on pointer enter (images only, not videos). Place GalleryZoomLens as a sibling of GalleryMainMedia inside GalleryZoom for the cursor indicator. Place GalleryZoomResult anywhere in GalleryRoot — as a sibling of GalleryZoom (side-panel) or absolute inside GalleryZoom (on-image overlay). Set magnification to control zoom level (default 2).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryZoomLensDefinition = defineComponent<GalleryZoomLensProps>({\n  name: 'GalleryZoomLens',\n  importPath: '@vtex/faststore/components',\n  component: GalleryZoomLens,\n  editor: { label: 'Gallery Zoom Lens', category: 'content' },\n  schema: {},\n  guideline:\n    'Cursor focus indicator inside GalleryZoom. Only renders when zoom is active. Must be inside GalleryZoom. Style as absolute-positioned square — uses CSS custom properties --zoom-x, --zoom-y, --lens-size for positioning.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryZoomResultDefinition = defineComponent<GalleryZoomResultProps>({\n  name: 'GalleryZoomResult',\n  importPath: '@vtex/faststore/components',\n  component: GalleryZoomResult,\n  editor: { label: 'Gallery Zoom Result', category: 'content' },\n  schema: {},\n  guideline:\n    'Magnified view driven by cursor position from GalleryZoom context. Only renders when zoom is active on an image. Place as sibling of GalleryZoom for side-panel zoom, or absolute inside GalleryZoom for on-image zoom.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryFullscreenDefinition = defineComponent<GalleryFullscreenProps>({\n  name: 'GalleryFullscreen',\n  importPath: '@vtex/faststore/components',\n  component: GalleryFullscreen,\n  content: GalleryFullscreenContent,\n  editor: { label: 'Gallery Fullscreen', category: 'content' },\n  schema: {},\n  guideline:\n    'Fullscreen overlay controlled by GalleryRoot state. Opens via GalleryOverflowCount, GalleryFullscreenTrigger, or thumbnailOpensFullscreen=true. Wraps a Dialog internally — place GalleryFullscreenClose, GalleryPrevious, GalleryMainMedia, GalleryNext, and optionally GalleryThumbnails as children. If no GalleryFullscreenTitle is composed, an sr-only title from the $content field title is rendered so the dialog always has an accessible name. Must be inside GalleryRoot.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryFullscreenTitleDefinition = defineComponent<GalleryFullscreenTitleProps>({\n  name: 'GalleryFullscreenTitle',\n  importPath: '@vtex/faststore/components',\n  component: GalleryFullscreenTitle,\n  content: GalleryFullscreenTitleContent,\n  editor: { label: 'Gallery Fullscreen Title', category: 'content' },\n  schema: {},\n  guideline:\n    'Accessible title for the fullscreen dialog. Required for screen readers. Renders its children, or the $content field label when it has none. Use sr-only to hide it visually or omit the class to display it. Must be inside GalleryFullscreen.',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryFullscreenCloseDefinition = defineComponent<GalleryFullscreenCloseProps>({\n  name: 'GalleryFullscreenClose',\n  importPath: '@vtex/faststore/components',\n  component: GalleryFullscreenClose,\n  editor: { label: 'Gallery Fullscreen Close', category: 'content' },\n  schema: {},\n  guideline:\n    'Closes the fullscreen overlay. Must be inside GalleryFullscreen. Place at the top-right corner. Accepts any children (Icon, text).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryPreviousDefinition = defineComponent<GalleryPreviousProps>({\n  name: 'GalleryPrevious',\n  importPath: '@vtex/faststore/components',\n  component: GalleryPrevious,\n  editor: { label: 'Gallery Previous', category: 'content' },\n  schema: {\n    wrap: { type: 'boolean', default: true, label: 'Wrap Around' },\n  },\n  guideline:\n    'Navigates to the previous media item; wraps to the last by default, or stops at the first with wrap={false}. Use inside GalleryFullscreen or inline for carousel controls. Accepts any children (Icon, text).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryNextDefinition = defineComponent<GalleryNextProps>({\n  name: 'GalleryNext',\n  importPath: '@vtex/faststore/components',\n  component: GalleryNext,\n  editor: { label: 'Gallery Next', category: 'content' },\n  schema: {\n    wrap: { type: 'boolean', default: true, label: 'Wrap Around' },\n  },\n  guideline:\n    'Navigates to the next media item; wraps to the first by default, or stops at the last with wrap={false}. Use inside GalleryFullscreen or inline for carousel controls. Accepts any children (Icon, text).',\n  docPath: GALLERY_DOC,\n});\n\nexport const GalleryMediaCountDefinition = defineComponent<GalleryMediaCountProps>({\n  name: 'GalleryMediaCount',\n  importPath: '@vtex/faststore/components',\n  component: GalleryMediaCount,\n  content: GalleryMediaCountContent,\n  editor: { label: 'Gallery Media Count', category: 'content' },\n  schema: {},\n  guideline:\n    'Displays the current media position and total count (e.g. \"2 / 10\"). The text is the $content field template, an ICU message with current and total arguments. Place anywhere inside GalleryRoot — typically in GalleryFullscreen or above GalleryMainMedia.',\n  docPath: GALLERY_DOC,\n});\n\nexport function GalleryRoot({\n  media = [],\n  defaultIndex = 0,\n  selectOnHover = false,\n  thumbnailOpensFullscreen = false,\n  children,\n  ...props\n}: GalleryRootProps) {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [fullscreenOpen, setFullscreenOpen] = useState(false);\n  const [zoomActive, setZoomActive] = useState(false);\n  const [zoomPosition, setZoomPosition] = useState({ x: 0, y: 0 });\n  const [zoomConfig, setZoomConfig] = useState({ magnification: 2, lensSize: 150 });\n  const [zoomContainerSize, setZoomContainerSize] = useState({ width: 0, height: 0 });\n  const [thumbnailOffset, setThumbnailOffset] = useState(0);\n  const [thumbnailsWindowSize, setThumbnailsWindowSize] = useState(0);\n\n  const openFullscreen = useCallback(() => setFullscreenOpen(true), []);\n  const closeFullscreen = useCallback(() => setFullscreenOpen(false), []);\n\n  const ctx = useMemo<GalleryContextValue>(\n    () => ({\n      media,\n      selectedIndex,\n      setSelectedIndex,\n      fullscreenOpen,\n      openFullscreen,\n      closeFullscreen,\n      selectOnHover,\n      thumbnailOpensFullscreen,\n      zoomActive,\n      setZoomActive,\n      zoomPosition,\n      setZoomPosition,\n      magnification: zoomConfig.magnification,\n      lensSize: zoomConfig.lensSize,\n      setZoomConfig,\n      zoomContainerSize,\n      setZoomContainerSize,\n      thumbnailOffset,\n      setThumbnailOffset,\n      thumbnailsWindowSize,\n      setThumbnailsWindowSize,\n    }),\n    [\n      media,\n      selectedIndex,\n      fullscreenOpen,\n      openFullscreen,\n      closeFullscreen,\n      selectOnHover,\n      thumbnailOpensFullscreen,\n      zoomActive,\n      zoomPosition,\n      zoomConfig,\n      zoomContainerSize,\n      thumbnailOffset,\n      thumbnailsWindowSize,\n    ],\n  );\n\n  return (\n    <GalleryContext value={ctx}>\n      <div {...props} data-fs-gallery=\"\">\n        {children}\n      </div>\n    </GalleryContext>\n  );\n}\n\nconst SWIPE_THRESHOLD = 50;\n\nexport function GalleryMainMedia({\n  objectFit = 'contain',\n  aspectRatio,\n  videoAutoPlay = false,\n  videoControls = true,\n  clickOpensFullscreen = false,\n  style,\n  ...props\n}: GalleryMainMediaProps) {\n  const { media, selectedIndex, setSelectedIndex, openFullscreen } = useGallery();\n  const currentItem = media[selectedIndex] ?? media[0];\n  const pointerStartX = useRef<number | null>(null);\n\n  function handlePointerDown(e: React.PointerEvent) {\n    pointerStartX.current = e.clientX;\n  }\n\n  function handlePointerUp(e: React.PointerEvent) {\n    if (pointerStartX.current === null) return;\n    const delta = e.clientX - pointerStartX.current;\n    pointerStartX.current = null;\n\n    if (Math.abs(delta) < SWIPE_THRESHOLD) {\n      if (clickOpensFullscreen) openFullscreen();\n      return;\n    }\n    if (media.length === 0) return;\n    if (delta < 0) {\n      setSelectedIndex(selectedIndex < media.length - 1 ? selectedIndex + 1 : 0);\n    } else {\n      setSelectedIndex(selectedIndex > 0 ? selectedIndex - 1 : media.length - 1);\n    }\n  }\n\n  if (!currentItem) {\n    return <div {...props} data-fs-gallery-main-media=\"\" />;\n  }\n\n  if (currentItem.type === 'video') {\n    return (\n      <div {...props} data-fs-gallery-main-media=\"\" data-fs-gallery-main-media-type=\"video\">\n        <video\n          src={currentItem.url}\n          controls={videoControls}\n          autoPlay={videoAutoPlay}\n          poster={currentItem.previewImageUrl}\n          style={{ objectFit, aspectRatio, ...style } as React.CSSProperties}\n        >\n          <track kind=\"captions\" />\n        </video>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...props}\n      data-fs-gallery-main-media=\"\"\n      data-fs-gallery-main-media-type=\"image\"\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      style={{ touchAction: 'pan-y', ...style }}\n    >\n      <img\n        src={currentItem.url}\n        alt={currentItem.altText}\n        style={{ display: 'block', width: '100%', objectFit, aspectRatio } as React.CSSProperties}\n        draggable={false}\n      />\n    </div>\n  );\n}\n\nexport function GalleryThumbnails({ hideWhenSingle = true, ...rest }: GalleryThumbnailsProps) {\n  const { media } = useGallery();\n  if (hideWhenSingle && media.length <= 1) return null;\n  return <GalleryThumbnailsInner {...rest} />;\n}\n\nfunction GalleryThumbnailsInner({\n  maxVisible,\n  slider = false,\n  animated = false,\n  direction = 'horizontal',\n  children,\n  style,\n  ...props\n}: Omit<GalleryThumbnailsProps, 'hideWhenSingle'>) {\n  const { media, thumbnailOffset, setThumbnailsWindowSize } = useGallery();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [containerSize, setContainerSize] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (slider && maxVisible != null) setThumbnailsWindowSize(maxVisible);\n  }, [slider, maxVisible, setThumbnailsWindowSize]);\n\n  // Measure the exact size needed to show maxVisible items so overflow:hidden clips correctly.\n  // useLayoutEffect runs after DOM commit but before paint — no visual flash.\n  useLayoutEffect(() => {\n    if (!animated || !slider || maxVisible == null || !trackRef.current) return;\n    const lastVisible = trackRef.current.children[maxVisible - 1] as HTMLElement | undefined;\n    if (!lastVisible) return;\n    const size =\n      direction === 'horizontal'\n        ? lastVisible.offsetLeft + lastVisible.offsetWidth\n        : lastVisible.offsetTop + lastVisible.offsetHeight;\n    setContainerSize(size);\n  }, [animated, slider, maxVisible, direction]);\n\n  useEffect(() => {\n    if (!animated || !slider || !trackRef.current) return;\n    const target = trackRef.current.children[thumbnailOffset] as HTMLElement | undefined;\n    if (!target) return;\n    trackRef.current.scrollTo({\n      left: direction === 'horizontal' ? target.offsetLeft : 0,\n      top: direction === 'vertical' ? target.offsetTop : 0,\n      behavior: 'smooth',\n    });\n  }, [thumbnailOffset, animated, slider, direction]);\n\n  const visibleItems = (() => {\n    if (animated && slider) return media; // render all; scroll handles visibility\n    if (maxVisible == null) return media;\n    if (slider) return media.slice(thumbnailOffset, thumbnailOffset + maxVisible);\n    // overflow mode: show first maxVisible items, last slot is overflow\n    return media.slice(0, maxVisible);\n  })();\n\n  const containerStyle: React.CSSProperties =\n    animated && slider\n      ? {\n          overflow: 'hidden',\n          position: 'relative',\n          ...(direction === 'horizontal' && containerSize != null ? { width: containerSize } : {}),\n          ...(direction === 'vertical' && containerSize != null ? { height: containerSize } : {}),\n          ...style,\n        }\n      : { ...style };\n\n  return (\n    <div {...props} ref={trackRef} style={containerStyle} data-fs-gallery-thumbnails=\"\">\n      {visibleItems.map((item, slotIndex) => {\n        const index = animated && slider ? slotIndex : slider ? thumbnailOffset + slotIndex : slotIndex;\n        const isOverflow = !slider && maxVisible != null && media.length > maxVisible && slotIndex === maxVisible - 1;\n        const overflowCount = isOverflow ? media.length - maxVisible + 1 : 0;\n\n        return (\n          <GalleryItemContext key={index} value={{ item, index, isOverflow, overflowCount }}>\n            {children}\n          </GalleryItemContext>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function GalleryThumbnail({ objectFit = 'contain', aspectRatio, style, ...props }: GalleryThumbnailProps) {\n  const { selectedIndex, setSelectedIndex, openFullscreen, selectOnHover, thumbnailOpensFullscreen } = useGallery();\n  const { item, index, isOverflow } = useGalleryItem();\n\n  const thumbSrc = item.type === 'video' ? (item.previewImageUrl ?? '') : item.url;\n\n  function handleClick() {\n    setSelectedIndex(index);\n    if (thumbnailOpensFullscreen || isOverflow) openFullscreen();\n  }\n\n  function handlePointerEnter() {\n    if (selectOnHover && !isOverflow) setSelectedIndex(index);\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      data-fs-gallery-thumbnail=\"\"\n      data-fs-gallery-thumbnail-selected={String(index === selectedIndex)}\n      data-fs-gallery-thumbnail-type={item.type}\n      {...props}\n    >\n      <img\n        src={thumbSrc}\n        alt={item.altText}\n        style={\n          { display: 'block', width: '100%', height: '100%', objectFit, aspectRatio, ...style } as React.CSSProperties\n        }\n      />\n    </button>\n  );\n}\n\nexport function GalleryOverflowCount({ $locale, $content, ...props }: GalleryOverflowCountProps) {\n  const { media, openFullscreen } = useGallery();\n  const { isOverflow, overflowCount } = useGalleryItem();\n  const messages = useMessageFormatter(GalleryOverflowCountContent, $content);\n\n  if (!isOverflow) return null;\n\n  return (\n    <button\n      type=\"button\"\n      onClick={openFullscreen}\n      aria-label={messages.format('ariaLabel', { total: media.length })}\n      data-fs-gallery-overflow-count=\"\"\n      {...props}\n    >\n      {messages.format('template', { count: overflowCount })}\n    </button>\n  );\n}\n\nexport function GalleryMedia({\n  objectFit = 'contain',\n  aspectRatio,\n  videoAutoPlay = false,\n  videoControls = true,\n  clickOpensFullscreen = false,\n  style,\n  ...props\n}: GalleryMediaProps) {\n  const { setSelectedIndex, openFullscreen } = useGallery();\n  const { item, index } = useGalleryItem();\n\n  function handleClick() {\n    setSelectedIndex(index);\n    openFullscreen();\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') handleClick();\n  }\n\n  const interactiveProps = clickOpensFullscreen\n    ? { onClick: handleClick, onKeyDown: handleKeyDown, role: 'button' as const, tabIndex: 0 }\n    : {};\n\n  const wrapperStyle: React.CSSProperties = {\n    ...style,\n    ...(aspectRatio ? { aspectRatio, position: 'relative' } : {}),\n  };\n  const mediaStyle: React.CSSProperties = aspectRatio\n    ? { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit }\n    : { display: 'block', width: '100%', height: '100%', objectFit };\n\n  if (item.type === 'video') {\n    return (\n      <div\n        {...props}\n        {...interactiveProps}\n        style={wrapperStyle}\n        data-fs-gallery-media-item=\"\"\n        data-fs-gallery-media-item-type=\"video\"\n      >\n        <video\n          src={item.url}\n          controls={videoControls}\n          autoPlay={videoAutoPlay}\n          poster={item.previewImageUrl}\n          style={mediaStyle as React.CSSProperties}\n        >\n          <track kind=\"captions\" />\n        </video>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...props}\n      {...interactiveProps}\n      style={wrapperStyle}\n      data-fs-gallery-media-item=\"\"\n      data-fs-gallery-media-item-type=\"image\"\n    >\n      <img src={item.url} alt={item.altText} style={mediaStyle as React.CSSProperties} draggable={false} />\n    </div>\n  );\n}\n\nexport function GalleryZoom({ magnification = 2, lensSize = 150, children, ...props }: GalleryZoomProps) {\n  const { media, selectedIndex, setZoomActive, setZoomPosition, setZoomConfig, setZoomContainerSize } = useGallery();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const currentItem = media[selectedIndex];\n  const isImage = currentItem?.type === 'image';\n\n  function handlePointerMove(e: React.PointerEvent) {\n    if (!containerRef.current || !isImage) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = (e.clientY - rect.top) / rect.height;\n    setZoomPosition({ x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)) });\n  }\n\n  function handlePointerEnter() {\n    setZoomConfig({ magnification, lensSize });\n    if (containerRef.current) {\n      const rect = containerRef.current.getBoundingClientRect();\n      setZoomContainerSize({ width: rect.width, height: rect.height });\n    }\n    if (isImage) setZoomActive(true);\n  }\n\n  function handlePointerLeave() {\n    setZoomActive(false);\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      {...props}\n      onPointerMove={handlePointerMove}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      data-fs-gallery-zoom=\"\"\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function GalleryZoomLens({ style, ...props }: GalleryZoomLensProps) {\n  const { zoomActive, zoomPosition, lensSize, zoomContainerSize } = useGallery();\n\n  if (!zoomActive) return null;\n\n  // Center the lens on the cursor, then clamp so the full square stays inside the container\n  // (snaps at the edges instead of overflowing the image).\n  const { width, height } = zoomContainerSize;\n  const maxLeft = Math.max(0, width - lensSize);\n  const maxTop = Math.max(0, height - lensSize);\n  const left = width > 0 ? Math.min(Math.max(zoomPosition.x * width - lensSize / 2, 0), maxLeft) : 0;\n  const top = height > 0 ? Math.min(Math.max(zoomPosition.y * height - lensSize / 2, 0), maxTop) : 0;\n\n  const lensStyle: React.CSSProperties = {\n    top,\n    left,\n    width: lensSize,\n    height: lensSize,\n    ...style,\n  };\n\n  return <div {...props} style={lensStyle} data-fs-gallery-zoom-lens=\"\" />;\n}\n\nexport function GalleryZoomResult({ style, ...props }: GalleryZoomResultProps) {\n  const { media, selectedIndex, zoomActive, zoomPosition, magnification } = useGallery();\n  const currentItem = media[selectedIndex];\n  const isVisible = zoomActive && !!currentItem && currentItem.type === 'image';\n\n  // Always renders to prevent layout shifts in flex/grid containers.\n  // Returning null when inactive would change the container dimensions and\n  // trigger pointerleave on GalleryZoom, causing a flicker loop.\n  const resultStyle: React.CSSProperties = isVisible\n    ? {\n        backgroundImage: `url(${currentItem.url})`,\n        backgroundSize: `${magnification * 100}%`,\n        backgroundPosition: `${zoomPosition.x * 100}% ${zoomPosition.y * 100}%`,\n        backgroundRepeat: 'no-repeat',\n        ...style,\n      }\n    : { visibility: 'hidden', ...style };\n\n  return <div {...props} style={resultStyle} data-fs-gallery-zoom-result=\"\" />;\n}\n\nexport function GalleryFullscreen({ $locale, $content, children, ...props }: GalleryFullscreenProps) {\n  const { fullscreenOpen, closeFullscreen } = useGallery();\n  const messages = useMessageFormatter(GalleryFullscreenContent, $content);\n  const [hasExplicitTitle, setHasExplicitTitle] = useState(false);\n  const register = useCallback(() => setHasExplicitTitle(true), []);\n  const registry = useMemo<FullscreenTitleRegistry>(() => ({ register }), [register]);\n\n  return (\n    <DialogRoot\n      open={fullscreenOpen}\n      onOpenChange={(open) => {\n        if (!open) closeFullscreen();\n      }}\n    >\n      <DialogPortal>\n        <DialogBackdrop className=\"fixed inset-0 bg-black/80\" data-fs-gallery-fullscreen-backdrop=\"\" />\n        <DialogViewport className=\"fixed inset-0 flex items-center justify-center\">\n          <DialogPopup {...props} data-fs-gallery-fullscreen=\"\">\n            <FullscreenTitleRegistryContext.Provider value={registry}>\n              {!hasExplicitTitle && (\n                <DialogTitle className=\"sr-only\" data-fs-gallery-fullscreen-title=\"\">\n                  {messages.format('title')}\n                </DialogTitle>\n              )}\n              {children}\n            </FullscreenTitleRegistryContext.Provider>\n          </DialogPopup>\n        </DialogViewport>\n      </DialogPortal>\n    </DialogRoot>\n  );\n}\n\nexport function GalleryFullscreenTitle({ $locale, $content, children, ...props }: GalleryFullscreenTitleProps) {\n  const registry = useContext(FullscreenTitleRegistryContext);\n  const messages = useMessageFormatter(GalleryFullscreenTitleContent, $content);\n  useLayoutEffect(() => {\n    registry?.register();\n  }, [registry]);\n  return (\n    <DialogTitle data-fs-gallery-fullscreen-title=\"\" {...props}>\n      {children ?? messages.format('label')}\n    </DialogTitle>\n  );\n}\n\nexport function GalleryFullscreenClose({ children, ...props }: GalleryFullscreenCloseProps) {\n  return (\n    <DialogClose data-fs-gallery-fullscreen-close=\"\" {...props}>\n      {children}\n    </DialogClose>\n  );\n}\n\nexport function GalleryPrevious({ children, wrap = true, ...props }: GalleryPreviousProps) {\n  const { media, selectedIndex, setSelectedIndex } = useGallery();\n\n  function handleClick() {\n    if (media.length === 0) return;\n    if (selectedIndex > 0) {\n      setSelectedIndex(selectedIndex - 1);\n    } else if (wrap) {\n      setSelectedIndex(media.length - 1);\n    }\n    // wrap === false at index 0 → no-op\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={media.length === 0 || (!wrap && selectedIndex === 0)}\n      onClick={handleClick}\n      data-fs-gallery-previous=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryNext({ children, wrap = true, ...props }: GalleryNextProps) {\n  const { media, selectedIndex, setSelectedIndex } = useGallery();\n\n  function handleClick() {\n    if (media.length === 0) return;\n    if (selectedIndex < media.length - 1) {\n      setSelectedIndex(selectedIndex + 1);\n    } else if (wrap) {\n      setSelectedIndex(0);\n    }\n    // wrap === false at last index → no-op\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={media.length === 0 || (!wrap && selectedIndex === media.length - 1)}\n      onClick={handleClick}\n      data-fs-gallery-next=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryThumbnailsPrevious({ step = 1, children, ...props }: GalleryThumbnailsPreviousProps) {\n  const { thumbnailOffset, setThumbnailOffset } = useGallery();\n  const isDisabled = thumbnailOffset === 0;\n  return (\n    <button\n      type=\"button\"\n      disabled={isDisabled}\n      onClick={() => setThumbnailOffset(Math.max(0, thumbnailOffset - step))}\n      data-fs-gallery-thumbnails-previous=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryThumbnailsNext({ step = 1, children, ...props }: GalleryThumbnailsNextProps) {\n  const { media, thumbnailOffset, setThumbnailOffset, thumbnailsWindowSize } = useGallery();\n  const isDisabled = thumbnailsWindowSize > 0 && thumbnailOffset + thumbnailsWindowSize >= media.length;\n  const maxOffset = Math.max(0, media.length - thumbnailsWindowSize);\n\n  return (\n    <button\n      type=\"button\"\n      disabled={isDisabled}\n      onClick={() => setThumbnailOffset(Math.min(maxOffset, thumbnailOffset + step))}\n      data-fs-gallery-thumbnails-next=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function GalleryMediaCount({ $locale, $content, ...props }: GalleryMediaCountProps) {\n  const { selectedIndex, media } = useGallery();\n  const messages = useMessageFormatter(GalleryMediaCountContent, $content);\n\n  return (\n    <span data-fs-gallery-media-count=\"\" {...props}>\n      {messages.format('template', { current: selectedIndex + 1, total: media.length })}\n    </span>\n  );\n}\n\nexport const Gallery = {\n  Root: GalleryRoot,\n  MainMedia: GalleryMainMedia,\n  Media: GalleryMedia,\n  Thumbnails: GalleryThumbnails,\n  ThumbnailsPrevious: GalleryThumbnailsPrevious,\n  ThumbnailsNext: GalleryThumbnailsNext,\n  Thumbnail: GalleryThumbnail,\n  OverflowCount: GalleryOverflowCount,\n  Zoom: GalleryZoom,\n  ZoomLens: GalleryZoomLens,\n  ZoomResult: GalleryZoomResult,\n  Fullscreen: GalleryFullscreen,\n  FullscreenTitle: GalleryFullscreenTitle,\n  FullscreenClose: GalleryFullscreenClose,\n  Previous: GalleryPrevious,\n  Next: GalleryNext,\n  MediaCount: GalleryMediaCount,\n};\n"],"mappings":"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"}

package/dist/particles/order-details-back/order-details-back.d.ts

@@ -1,4 +1,4 @@
-import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentPropsWithRef } from "react";
@@ -14,15 +14,17 @@ export declare const OrderDetailsBackContent: {
       readonly label: {
         readonly type: "string";
         readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Back to orders";
       };
     };
   };
 };
 export type OrderDetailsBackContentValue = ContentValue<typeof OrderDetailsBackContent>;
-export type OrderDetailsBackProps = ComponentPropsWithRef<'a'> & {
+export type OrderDetailsBackProps = ComponentPropsWithRef<'a'> & MessageLocaleProp & {
   $content?: OrderDetailsBackContentValue;
 };
 export declare const OrderDetailsBackDefinition: ComponentDefinition<OrderDetailsBackProps>;
-export declare function OrderDetailsBack({ className, ref, $content, ...props }: OrderDetailsBackProps): import("react/jsx-runtime").JSX.Element;
+export declare function OrderDetailsBack({ className, ref, $content, $locale, ...props }: OrderDetailsBackProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=order-details-back.d.ts.map

package/dist/particles/order-details-back/order-details-back.js

@@ -2,7 +2,7 @@
 import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
-import { useIntl } from "../../sdk/i18n/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/particles/order-details-back/order-details-back.tsx
 const LIST_HREF = "/pvt/orders";
@@ -15,7 +15,9 @@ const OrderDetailsBackContent = defineContentType({
 		additionalProperties: false,
 		properties: { label: {
 			type: "string",
-			title: "Label"
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Back to orders"
 		} }
 	}
 });
@@ -29,21 +31,17 @@ const OrderDetailsBackDefinition = defineComponent({
 		category: "action"
 	},
 	schema: {},
-	guideline: "The return from one order to the order list. Place it first on the order page when the layout has no account breadcrumb. The label is content; a blank field keeps the catalogue."
+	guideline: "The return from one order to the order list. Place it first on the order page when the layout has no account breadcrumb. The label is content."
 });
-function authored(value, fallback) {
-	return value?.trim() || fallback;
-}
-function OrderDetailsBack({ className, ref, $content, ...props }) {
-	const intl = useIntl();
-	const label = authored($content?.label, intl.formatMessage({ id: "fs/order.back-to-orders" }));
+function OrderDetailsBack({ className, ref, $content, $locale, ...props }) {
+	const { format } = useMessageFormatter(OrderDetailsBackContent, $content);
 	return /* @__PURE__ */ jsx("a", {
 		...props,
 		ref,
 		href: LIST_HREF,
 		className,
 		"data-fs-order-details-back": "",
-		children: label
+		children: format("label")
 	});
 }
 //#endregion