2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T2498,"use client"; import { IconPhoto } from "@tabler/icons-react"; import { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from "@/components/ui/carousel"; import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Lightbox, LightboxPhoto } from "@/components/ui/lightbox"; import { cn } from "@/lib/utils"; import type { Product, ProductImage } from "../../../lib/commerce/types"; import { CrossfadeImage } from "../_shared/crossfade-image"; import { EASE_OUT, FOCUS_RING } from "../_shared/motion"; import { PortalScope } from "../_shared/portal-scope"; import { useResolvedSelection, type VariantSelection } from "../_shared/use-variant-selection"; export type PdpGalleryProps = { product: Product; /** Share a selection with the buy box; the gallery follows the selected variant's image. */ selection?: VariantSelection; /** Override the images (defaults to the selection's images). */ images?: ProductImage[]; /** * thumbs-start: vertical thumbnails + large image. stacked-scroll: every image stacked (pair with a sticky buy box). * grid-2: two-up grid, first image full width. Below md every variant is a swipeable carousel with dots. */ variant?: "thumbs-start" | "stacked-scroll" | "grid-2"; /** Load the first image eagerly. */ priority?: boolean; className?: string; }; const SQUARE = "relative aspect-square w-full overflow-hidden rounded-brand border border-rule bg-surface-product"; function Photo({ image, index, priority, crossfade, }: { image: ProductImage; index: number; priority?: boolean; crossfade?: boolean; }) { return ( {crossfade ? ( ) : ( // eslint-disable-next-line @next/next/no-img-element {image.alt}

)} ); } /** Dot pagination: 24px hit areas around 6px dots. */ export function GalleryDots({ count, index, onSelect, className }: { count: number; index: number; onSelect: (i: number) => void; className?: string }) { if (count < 2) return null; return (

{Array.from({ length: count }, (_, i) => ( ))}

); } /** Mobile carousel with dots. Also exported for the quick view. */ export function GalleryCarousel({ images, index, onIndexChange, priority, }: { images: ProductImage[]; index: number; onIndexChange: (i: number) => void; priority?: boolean; }) { const [api, setApi] = useState(); useEffect(() => { if (!api) return; const onSelect = () => onIndexChange(api.selectedScrollSnap()); api.on("select", onSelect); return () => { api.off("select", onSelect); }; }, [api, onIndexChange]); useEffect(() => { if (api && api.selectedScrollSnap() !== index) api.scrollTo(index, index === 0); }, [api, index]); return (

{images.map((image, i) => ( ))}

); } function AllPhotos({ images, title }: { images: ProductImage[]; title: string }) { return ( ); } export function PdpGallery({ product, selection, images: imagesProp, variant = "thumbs-start", priority, className, }: PdpGalleryProps) { const sel = useResolvedSelection(product, selection); const images = imagesProp ?? sel.images; const lead = images[0]?.src; const [index, setIndex] = useState(0); const [seenLead, setSeenLead] = useState(lead); if (lead !== seenLead) { setSeenLead(lead); setIndex(0); } if (images.length === 0) return null; const active = images[Math.min(index, images.length - 1)]; const many = images.length > 1; return (

{variant === "thumbs-start" ? (

{many ? (

{images.map((image, i) => ( ))}

) : null}

{many ? (

{index + 1} / {images.length}

) : null}

) : null} {variant === "stacked-scroll" ? (

{images.map((image, i) => ( ))}

) : null} {variant === "grid-2" ? (

{images.map((image, i) => (

2 && "col-span-2")}>

))}

) : null}

); } export default PdpGallery; 31:T1d21,"use client"; /* * Variant selection for PDP blocks. * * const selection = useVariantSelection(product, { sizes?, initial?, initialSize? }); * * Returns a VariantSelection (see the type below): selected options, the resolved * `variant` (via `variantFor`), `price` / `compareAt`, gallery `images` (via * `imagesFor`, the variant image first), availability, and a static size list. * * Size is NOT a product option in brand-factory data (no per-size data exists), so it is * tracked beside the options: `size`, `setSize`, `needsSize`. When a product DOES have a * "Size" option (Shopify/Printify), it behaves like any other option and `needsSize` is false. * * Share one selection between blocks either by passing `selection` down as a prop, or by * wrapping them in ; every PDP block resolves * its selection with `useResolvedSelection(product, selectionProp)`. */ import { createContext, createElement, useCallback, useContext, useMemo, useState, type ReactNode, } from "react"; import { findCheapestVariant, variantFor } from "../../../lib/commerce/select"; import { DEFAULT_SIZES, sizesFor } from "./sizes"; import { imagesForVariant, initialVariant } from "./variant-images"; import type { Money, Product, ProductImage, Variant } from "../../../lib/commerce/types"; export { DEFAULT_SIZES }; export type VariantSelection = { product: Product; /** Selected product options, e.g. { Garment: "hoodie", Color: "Black" }. */ selected: Record; /** Select one option. If the combination does not exist, the other options snap to the closest variant. */ select: (name: string, value: string) => void; /** The resolved variant (undefined only if the product has no variants). */ variant: Variant | undefined; price: Money; compareAt: Money | undefined; /** Gallery images for the selection: the variant image first, then the product's. */ images: ProductImage[]; /** Set when the photo shown belongs to a different Color than the one selected ("photo shows "). */ imageNote: string | undefined; /** images[0]. */ image: ProductImage | undefined; /** The selected variant can be bought (not sold out). */ available: boolean; /** Available AND has a store URL ("coming soon" when false but available). */ buyable: boolean; /** Selected variant's mrch.shop / checkout URL, or null ("coming soon"). */ storeUrl: string | null; /** Static size list (empty when the product has its own "Size" option). */ sizes: readonly string[]; size: string | undefined; setSize: (size: string) => void; /** True when a size must be chosen before adding to the cart. */ needsSize: boolean; /** Set when an add was attempted without a size; clears when a size is chosen. */ sizeError: boolean; flagSizeError: () => void; /** Whether any available variant carries this option value (a sold-out value is disabled). */ isOptionAvailable: (name: string, value: string) => boolean; /** The image a variant with this option value shows (for swatch hover previews). */ imageForOption: (name: string, value: string) => ProductImage | undefined; }; export type UseVariantSelectionOptions = { initial?: Record; sizes?: readonly string[]; initialSize?: string; }; export function hasSizeOption(product: Product): boolean { return product.options.some((o) => o.name === "Size"); } function closest(product: Product, name: string, value: string, selected: Record) { const pool = product.variants.filter((v) => v.options[name] === value); if (pool.length === 0) return undefined; const score = (v: Variant) => Object.entries(selected).filter(([k, val]) => k !== name && v.options[k] === val).length + (v.available ? 0.5 : 0); return pool.reduce((a, b) => (score(b) > score(a) ? b : a)); } export function useVariantSelection( product: Product, opts: UseVariantSelectionOptions = {}, ): VariantSelection { const [selected, setSelected] = useState>(() => ({ ...(initialVariant(product)?.options ?? {}), ...opts.initial, })); const [size, setSizeState] = useState(opts.initialSize); const [sizeError, setSizeError] = useState(false); // Garment-aware: a product Size option wins; else the explicit `sizes` option; else sizesFor(garment) (null = one size). const rule = opts.sizes ?? sizesFor(selected.Garment); const needsSize = !hasSizeOption(product) && rule !== null; const sizes = needsSize && rule ? rule : []; const variant = useMemo(() => variantFor(product, selected), [product, selected]); const shown = useMemo(() => imagesForVariant(product, variant), [product, variant]); const images = shown.images; const select = useCallback( (name: string, value: string) => { setSelected((prev) => { const next = { ...prev, [name]: value }; if (variantFor(product, next)) return next; const near = closest(product, name, value, prev); return near ? { ...near.options } : prev; }); }, [product], ); const setSize = useCallback((value: string) => { setSizeState(value); setSizeError(false); }, []); const flagSizeError = useCallback(() => setSizeError(true), []); const isOptionAvailable = useCallback( (name: string, value: string) => product.variants.some((v) => v.options[name] === value && v.available), [product], ); const imageForOption = useCallback( (name: string, value: string) => (closest(product, name, value, selected) ?? undefined)?.image, [product, selected], ); const fallback = findCheapestVariant(product); // A product with no variants is "unavailable": no throw, price falls back to the catalog range. const available = Boolean(variant?.available); return { product, selected, select, variant, price: (variant ?? fallback)?.price ?? product.priceRange.min, compareAt: variant?.compareAt, images, imageNote: shown.mismatch ? shown.shownColor : undefined, image: images[0], available, buyable: available && Boolean(variant?.storeUrl), storeUrl: variant?.storeUrl ?? null, sizes, size, setSize, needsSize, sizeError, flagSizeError, isOptionAvailable, imageForOption, }; } const SelectionContext = createContext(null); /** Shares one selection with every PDP block below it. */ export function VariantSelectionProvider({ product, children, ...opts }: UseVariantSelectionOptions & { product: Product; children: ReactNode }) { const selection = useVariantSelection(product, opts); return createElement(SelectionContext.Provider, { value: selection }, children); } /** The selection from a surrounding VariantSelectionProvider, or null (for optional wiring). */ export function useSharedSelection(): VariantSelection | null { return useContext(SelectionContext); } /** The explicit prop, else the provider's selection for the same product, else a private one. */ export function useResolvedSelection( product: Product, selection?: VariantSelection, opts?: UseVariantSelectionOptions, ): VariantSelection { const shared = useContext(SelectionContext); const own = useVariantSelection(product, opts); if (selection) return selection; if (shared && shared.product.handle === product.handle) return shared; return own; } 32:T748,"use client"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; type Props = { src: string; alt: string; width?: number; height?: number; loading?: "eager" | "lazy"; fetchPriority?: "high" | "low" | "auto"; className?: string; }; /** * that crossfades when `src` changes (150ms, motion-reduce: instant). The previous image * stays underneath until the new one has faded in, so there is no flash of the image well. * Fill the parent: the parent supplies the size (aspect-square + relative). */ export function CrossfadeImage({ src, alt, width = 1200, height = 1200, loading, fetchPriority, className }: Props) { const [state, setState] = useState<{ current: string; previous: string | null }>({ current: src, previous: null, }); if (src !== state.current) setState({ current: src, previous: state.current }); useEffect(() => { if (!state.previous) return; const t = setTimeout(() => setState((s) => ({ ...s, previous: null })), 200); return () => clearTimeout(t); }, [state.previous]); const img = "absolute inset-0 size-full object-contain"; return ( <> {state.previous ? ( // eslint-disable-next-line @next/next/no-img-element

) : null} {/* eslint-disable-next-line @next/next/no-img-element */} {alt}

); } 33:Ta9c,import type { Money, Product, ProductImage, Variant } from "./types"; /** Price range of a variant list. Empty list gives a zero range in `currency`. */ export function priceRangeOf( variants: Variant[], currency = "USD", ): { min: Money; max: Money } { if (variants.length === 0) { const zero = { amount: 0, currency }; return { min: zero, max: zero }; } const sorted = [...variants].sort((a, b) => a.price.amount - b.price.amount); return { min: sorted[0].price, max: sorted[sorted.length - 1].price }; } /** Lowest priced variant, preferring available ones. Undefined when the product has no variants. */ export function findCheapestVariant(product: Product): Variant | undefined { if (product.variants.length === 0) return undefined; const pool = product.variants.some((v) => v.available) ? product.variants.filter((v) => v.available) : product.variants; return pool.reduce((a, b) => (b.price.amount < a.price.amount ? b : a)); } /** * Same as `findCheapestVariant` but typed non-optional so existing call sites keep compiling. * Adapters never emit a product without variants, so the throw is unreachable for adapter * output; hand-built products should use `findCheapestVariant`. */ export function cheapestVariant(product: Product): Variant { const v = findCheapestVariant(product); if (!v) throw new Error(`cheapestVariant: product "${product.handle}" has no variants (use findCheapestVariant)`); return v; } /** First variant whose options contain every given key/value. */ export function variantFor( product: Product, options: Record, ): Variant | undefined { return product.variants.find((v) => Object.entries(options).every(([k, val]) => v.options[k] === val), ); } export function optionValues(product: Product, name: string): string[] { return product.options.find((o) => o.name === name)?.values ?? []; } /** Images to show for a variant: its own image first, then the rest of the product. */ export function imagesFor(product: Product, variant?: Variant): ProductImage[] { if (!variant?.image) return product.images; const own = variant.image; return [own, ...product.images.filter((i) => i.src !== own.src)]; } export function formatMoney(money: Money, locale = "en-US"): string { const whole = Number.isInteger(money.amount); return new Intl.NumberFormat(locale, { style: "currency", currency: money.currency, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: 2, }).format(money.amount); } /** True when at least one variant can be bought somewhere. */ export function isBuyable(product: Product): boolean { return product.variants.some((v) => v.available && v.storeUrl); } 34:T84e,export type Brand = { slug: string; name: string; tagline: string; canonical: string; storeOrigin: string; /** Theme name; equals the value of `data-brand` on the wrapping element. */ theme: string; voice: { caps: boolean }; }; export type Money = { amount: number; currency: string }; export type ProductImage = { src: string; alt: string; width?: number; height?: number; view?: "front" | "back" | "detail" | "lifestyle" | "left" | "right" | "person" | "folded"; /** * False when the view is known to carry no artwork (noteam cap `back` is a blank cap). * Undefined means true. Hover-swap and "next image" UI should only use views with art. */ hasArt?: boolean; /** Smaller twin of `src` (600px for brand-factory mockups) when one exists. */ thumb?: string; }; export type ProductOption = { name: "Color" | "Size" | "Garment" | (string & {}); values: string[]; }; export type Variant = { id: string; title: string; options: Record; price: Money; compareAt?: Money; /** Can be bought if a storeUrl exists. `false` only for sold out (Shopify/Printify). */ available: boolean; image?: ProductImage; /** Where the buy button goes. `null` means "coming soon". */ storeUrl: string | null; sku?: string; }; export type ProductSource = { kind: "brand-factory" | "shopify" | "printify" | "mrch" | "noteam"; ref?: string; }; export type Product = { id: string; handle: string; title: string; line?: string; description: string; collection: string; tags: string[]; images: ProductImage[]; options: ProductOption[]; variants: Variant[]; featuredImage: ProductImage; priceRange: { min: Money; max: Money }; source: ProductSource; /** Source-specific extras (noteam colorway, Printify blueprint/provider ids). Optional, never required by blocks. */ extras?: Record; }; export type Collection = { handle: string; title: string; blurb: string; /** Product handles. */ products: string[]; }; export type Catalog = { brand: Brand; products: Product[]; collections: Collection[]; }; 35:T53f,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpGalleryMeta: BlockMeta = { slug: "pdp-gallery", title: "PDP gallery", description: "Product gallery: vertical thumbnails + large image, stacked scroll, or two-up grid; a swipeable carousel with dots on mobile. Click zooms through the Kobra lightbox ripple.", group: "pdp", kobraDeps: ["carousel", "lightbox", "dialog", "button"], files: [ "blocks/pdp/pdp-gallery/pdp-gallery.tsx", "blocks/pdp/_shared/use-variant-selection.ts", "blocks/pdp/_shared/crossfade-image.tsx", "blocks/pdp/_shared/motion.ts", "lib/commerce/select.ts", "lib/commerce/types.ts", ], props: [ { name: "product", type: "Product", description: "The product; images follow the selected variant." }, { name: "selection", type: "VariantSelection", description: "Shared selection from useVariantSelection (optional)." }, { name: "variant", type: "'thumbs-start' | 'stacked-scroll' | 'grid-2'", default: "'thumbs-start'", description: "Desktop layout. Below md it is always a carousel with dots." }, { name: "images", type: "ProductImage[]", description: "Override the images." }, { name: "priority", type: "boolean", description: "Eager-load the first image." }, ], tags: ["pdp", "gallery", "lightbox", "carousel"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#pdp","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"PDP"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"PDP gallery"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"PDP gallery"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Product gallery: vertical thumbnails + large image, stacked scroll, or two-up grid; a swipeable carousel with dots on mobile. Click zooms through the Kobra lightbox ripple."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"pdp-gallery","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/pdp/pdp-gallery/pdp-gallery.tsx","code":"$30"},{"path":"blocks/pdp/_shared/use-variant-selection.ts","code":"$31"},{"path":"blocks/pdp/_shared/crossfade-image.tsx","code":"$32"},{"path":"blocks/pdp/_shared/motion.ts","code":"/*\n * House motion for the PDP blocks (Kobra design-eng numbers).\n * Full literal class strings so Tailwind can see them.\n * enter: 150-250ms on EASE_OUT exit: shorter, on EASE_EXIT\n * Use together with `motion-reduce:transition-none` / `motion-reduce:animate-none`.\n */\nexport const EASE_OUT = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\nexport const EASE_EXIT = \"ease-[cubic-bezier(0.4,0,0.6,1)]\";\n\n/** Shared focus ring (Kobra: one ring, keyboard only). */\nexport const FOCUS_RING = \"outline-none focus-visible:ring-3 focus-visible:ring-ring/50\";\n"},{"path":"lib/commerce/select.ts","code":"$33"},{"path":"lib/commerce/types.ts","code":"$34"},{"path":"blocks/pdp/pdp-gallery/demo.tsx","code":"import { pdpDemoData } from \"../../../lib/commerce/fixtures/pdp\";\nimport { PdpGallery } from \"./pdp-gallery\";\n\nexport async function PdpGalleryDemo({ brand }: { brand?: string }) {\n const { product } = await pdpDemoData(brand);\n return (\n

\n {([\"thumbs-start\", \"grid-2\", \"stacked-scroll\"] as const).map((variant) => (\n

\n {variant}\n

\n \n

\n ))}\n

\n );\n}\n\nexport default PdpGalleryDemo;\n"},{"path":"blocks/pdp/pdp-gallery/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]