2d: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30: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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T2743,"use client"; import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from "@/components/ui/carousel"; import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"; import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "@/components/ui/drawer"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { CrossfadeImage } from "../_shared/crossfade-image"; import { resolveProductHref, type PdpHrefs, type ProductHref } from "../_shared/links"; import { FOCUS_RING } from "../_shared/motion"; import { PortalScope } from "../_shared/portal-scope"; import type { Locked } from "../_shared/use-locked"; import { useIsDesktop } from "../_shared/use-media-query"; import { useVariantSelection, type VariantSelection } from "../_shared/use-variant-selection"; import { PdpBuyBox } from "../pdp-buy-box/pdp-buy-box"; import { GalleryDots } from "../pdp-gallery/pdp-gallery"; /* ---- context ------------------------------------------------------------------------------ */ export type QuickView = { ready: boolean; /** Open the quick view for a product (or a product handle found in the provider's `products`). */ open: (product: Product | string) => void; close: () => void; /** The product currently shown (kept while the exit animation runs). */ product: Product | null; isOpen: boolean; }; const NO_QUICK_VIEW: QuickView = { ready: false, open: () => {}, close: () => {}, product: null, isOpen: false }; const QuickViewContext = createContext(NO_QUICK_VIEW); /** Open the quick view from any grid: `const qv = useQuickView(); `. */ export function useQuickView(): QuickView { return useContext(QuickViewContext); } /* ---- the surface -------------------------------------------------------------------------- */ function MiniGallery({ selection }: { selection: VariantSelection }) { const images = selection.images; const lead = images[0]?.src; const [api, setApi] = useState(); const [index, setIndex] = useState(0); const [seenLead, setSeenLead] = useState(lead); if (lead !== seenLead) { setSeenLead(lead); setIndex(0); } useEffect(() => { if (!api) return; const onSelect = () => setIndex(api.selectedScrollSnap()); api.on("select", onSelect); return () => { api.off("select", onSelect); }; }, [api]); useEffect(() => { if (api && api.selectedScrollSnap() !== index) api.scrollTo(index, index === 0); }, [api, index]); const many = images.length > 1; return (

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

{i === 0 ? ( ) : ( // eslint-disable-next-line @next/next/no-img-element {image.alt}

)}

))} {many ? (

) : null}

); } function QuickViewContent({ product, hrefFor, brandSlug, drop, layout, }: { product: Product; hrefFor: ProductHref; brandSlug?: string; drop: Drop; layout: "dialog" | "drawer"; }) { const selection = useVariantSelection(product); // The buy box inside shares this selection so the gallery follows color changes. return (

); } /** Buy box bound to an explicit selection. */ type Drop = { locked?: Locked; onNotify?: () => void }; function SelectionBridge({ selection, product, hrefFor, brandSlug, drop }: { selection: VariantSelection; product: Product; hrefFor: ProductHref; brandSlug?: string; drop: Drop }) { return (

View full details

); } export type QuickViewProviderProps = { /** Products reachable by handle through `open("handle")`. */ products?: Product[]; /** Route of the full PDP. Default /products/. */ hrefFor?: ProductHref; /** Route overrides (product) for "View full details". hrefFor wins when both are given. */ hrefs?: PdpHrefs; brandSlug?: string; /** Pre-drop state forwarded to the buy box. */ locked?: Locked; onNotify?: () => void; children: ReactNode; }; /** * Wrap a page (or a grid) once; `useQuickView().open(product)` opens the whole PDP in a dialog * (md and up) or a bottom drawer (below). Base UI traps focus, closes on Escape, restores focus to * the trigger. Enter 200ms --ease-out, exit 150ms. */ export function QuickViewProvider({ products = [], hrefFor: hrefForProp, hrefs, brandSlug, locked, onNotify, children }: QuickViewProviderProps) { const hrefFor = resolveProductHref(hrefForProp, hrefs); const drop = { locked, onNotify }; const [product, setProduct] = useState(null); const [isOpen, setOpen] = useState(false); const desktop = useIsDesktop(); const open = useCallback( (target: Product | string) => { const found = typeof target === "string" ? products.find((p) => p.handle === target) : target; if (!found) return; setProduct(found); setOpen(true); }, [products], ); const close = useCallback(() => setOpen(false), []); const value = useMemo(() => ({ ready: true, open, close, product, isOpen }), [open, close, product, isOpen]); return ( {children} {product ? ( desktop ? ( ) : ( {product.title} Quick view

) ) : null} ); } function QuickViewDialog({ product, open, onOpenChange, hrefFor, brandSlug, drop, }: { product: Product; open: boolean; onOpenChange: (open: boolean) => void; hrefFor: ProductHref; brandSlug?: string; drop: Drop; }) { const popup = useRef(null); return ( ); } /** Convenience button: opens the quick view for `product`. */ export function QuickViewButton({ product, className, children = "Quick view" }: { product: Product; className?: string; children?: ReactNode }) { const qv = useQuickView(); return ( ); } export default QuickViewProvider; 32:T2096,"use client"; import { IconShare3 } from "@tabler/icons-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { toast } from "@/components/ui/toast"; import { cn } from "@/lib/utils"; import { mrchShopUrl } from "../../../lib/commerce/adapters/mrch"; import { formatMoney } from "../../../lib/commerce/select"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { useCart } from "../_shared/cart-store"; import { PendingButton } from "../_shared/pending-button"; import { QuantityStepper } from "../_shared/ui/quantity-stepper"; import { StockMarker } from "../_shared/ui/stock-marker"; import { defaultTrustItems, TrustRow, type TrustItem } from "../_shared/ui/trust-row"; import { useLocked, type Locked } from "../_shared/use-locked"; import { useAddToCart } from "../_shared/use-add-to-cart"; import { useResolvedSelection, type VariantSelection } from "../_shared/use-variant-selection"; import { WindowFrame, type WindowTone } from "../_shared/window-frame"; import { PdpSizeGuide } from "../pdp-size-guide/pdp-size-guide"; import { PdpVariantPicker, type PdpVariantPickerProps } from "../pdp-variant-picker/pdp-variant-picker"; /* * Buy-state rule (shared by buy box, quick view, sticky bar and cart drawer): * - "Add to cart" stays enabled whenever the selected variant is `available`: the local bag works * even before a store exists. * - When the variant has no storeUrl (BuyTarget `soon`) there is exactly ONE quiet .micro line under * the button ("checkout opens on mrch.shop when the store goes live"). No second disabled button. * - A disabled "Sold out" button appears only when `available === false`. */ export type PdpBuyBoxProps = { product: Product; selection?: VariantSelection; /** * default: display-l title, full column. window: title-bar framed (playful brands). minimal: quiet, no extras. * compact: smaller title, for the quick view. */ variant?: "default" | "window" | "minimal" | "compact"; /** Brand slug for the mrch.shop UTM wrapper. Falls back to the CartProvider brand. */ brandSlug?: string; /** Placement tag for analytics (`utm_medium`). */ placement?: string; sizes?: readonly string[]; soldOutSizes?: readonly string[]; pickerVariant?: PdpVariantPickerProps["variant"]; /** Window title for the `window` variant. */ windowTitle?: string; /** Title-bar color: quiet (default), accent (light accents), accent-solid (dark accents). */ windowTone?: WindowTone; trust?: TrustItem[] | false; showSizeGuide?: boolean; /** Heading level of the title. */ as?: "h1" | "h2" | "p"; /** Pre-drop: while now < dropsAt the primary button is a disabled "Drops in 13d" and "Notify me" calls onNotify. */ locked?: Locked; onNotify?: () => void; className?: string; }; async function share(title: string) { const url = window.location.href; try { if (navigator.share) { await navigator.share({ title, url }); return; } await navigator.clipboard.writeText(url); toast({ message: "Link copied", state: "success" }); } catch { /* share sheet dismissed */ } } export function PdpBuyBox({ product, selection, variant = "default", brandSlug, placement = "product-buy", sizes, soldOutSizes, pickerVariant, windowTitle = "buy.exe", windowTone, trust, showSizeGuide = true, locked, onNotify, as: Heading = "h1", className, }: PdpBuyBoxProps) { const sel = useResolvedSelection(product, selection, { sizes }); const cart = useCart(); const { pending, add } = useAddToCart(sel); const [qty, setQty] = useState(1); const slug = brandSlug ?? cart.brand?.slug; const drop = useLocked(locked); const v = sel.variant; const compact = variant === "compact"; const minimal = variant === "minimal"; const trustItems = trust === false || minimal || compact ? null : (trust ?? defaultTrustItems); const mrchHref = v?.storeUrl ? slug ? mrchShopUrl(slug, placement, v.storeUrl, { designSlug: product.handle }) : v.storeUrl : null; const garment = sel.selected.Garment; const color = sel.selected.Color; const body = (

{product.line && product.line !== product.title ? ( {product.line} ) : product.collection ? ( {product.collection.replace(/-/g, " ")} ) : null} {product.title}

{minimal ? null : }

{variant === "window" && product.description ? (

{product.description}

) : null}

: undefined} />

(sel.available && !drop.locked ? add(qty) : undefined)} className="h-12 min-w-0 flex-1 text-base" > {drop.locked ? ( {drop.label} {drop.text} ) : sel.available ? ( "Add to cart" ) : ( "Sold out" )}

{drop.locked && onNotify ? ( ) : null} {drop.locked ? null : mrchHref ? ( ) : (

checkout opens on mrch.shop when the store goes live

)}

{trustItems ? : null} {minimal || compact ? null : (

)}

{v ? `${v.title} selected, ${formatMoney(sel.price)}` : ""}

); if (variant === "window") { return ( {body} ); } return body; } export default PdpBuyBox; 33: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; 34: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; } 35: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}

); } 36:T485,import type { Product } from "../../../lib/commerce/types"; export type ProductHref = (product: Product) => string; /** Route overrides so a template mounted under a prefix links inside itself. All optional. */ export type PdpHrefs = { /** Default "/". */ home?: string; /** Default (handle) => "/collections/". */ collection?: (handle: string) => string; /** Default (handle) => "/products/". */ product?: (handle: string) => string; }; /** Resolve a product href: explicit `hrefFor` wins, then `hrefs.product`, then /products/. */ export function resolveProductHref(hrefFor?: ProductHref, hrefs?: PdpHrefs): ProductHref { if (hrefFor) return hrefFor; const fn = hrefs?.product; return fn ? (p) => fn(p.handle) : defaultProductHref; } /** Default product route used by the templates: /products/. */ export const defaultProductHref: ProductHref = (product) => `/products/${product.handle}`; /** "iron-and-asphalt" -> "iron and asphalt". Collections carry slugs; use `Collection.title` when you have it. */ export function humanize(slug: string): string { return slug.replace(/[-_]+/g, " ").trim(); } 37:T858,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpQuickViewMeta: BlockMeta = { slug: "pdp-quick-view", title: "Quick view (PDP in a lightbox)", description: "The whole PDP in a Kobra dialog (centered two columns, mini gallery with dot pagination, buy box, size guide, view full details) or a bottom drawer on mobile. QuickViewProvider + useQuickView() open it from any grid.", group: "pdp", kobraDeps: ["dialog", "drawer", "carousel", "button", "toggle-group", "tooltip", "sheet", "select", "table", "toast"], files: [ "blocks/pdp/pdp-quick-view/pdp-quick-view.tsx", "blocks/pdp/pdp-quick-view/quick-view-grid.tsx", "blocks/pdp/pdp-buy-box/pdp-buy-box.tsx", "blocks/pdp/pdp-gallery/pdp-gallery.tsx", "blocks/pdp/_shared/use-variant-selection.ts", "blocks/pdp/_shared/use-media-query.ts", "blocks/pdp/_shared/crossfade-image.tsx", "blocks/pdp/_shared/links.ts", ], props: [ { name: "locked", type: "{ dropsAt: string; label?: string }", description: "Pre-drop: while now < dropsAt the primary button is a disabled Drops in 13d (tabular, live); reverts after dropsAt." }, { name: "onNotify", type: "() => void", description: "Called by the Notify me button shown while locked." }, { name: "hrefs", type: "{ home?: string; collection?: (handle) => string; product?: (handle) => string }", default: "'/', /collections/, /products/", description: "Route overrides (product) for the View full details link; hrefFor wins when both are set." }, { name: "products", type: "Product[]", description: "Products reachable by handle through open('handle')." }, { name: "hrefFor", type: "(product) => string", default: "/products/", description: "Route of the full PDP for the 'View full details' link." }, { name: "brandSlug", type: "string", description: "UTM source for the mrch.shop link." }, { name: "useQuickView()", type: "{ open(product | handle), close(), product, isOpen }", description: "Open it from a product card's onQuickView." }, ], tags: ["pdp", "quick-view", "dialog", "drawer", "lightbox"], status: "ready", }; 24:["$","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":["$","$L2d",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":["$","$L2d",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":"Quick view (PDP in a lightbox)"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Quick view (PDP in a lightbox)"}],["$","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":"The whole PDP in a Kobra dialog (centered two columns, mini gallery with dot pagination, buy box, size guide, view full details) or a bottom drawer on mobile. QuickViewProvider + useQuickView() open it from any grid."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"pdp-quick-view","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/pdp/pdp-quick-view/pdp-quick-view.tsx","code":"$31"},{"path":"blocks/pdp/pdp-quick-view/quick-view-grid.tsx","code":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { Product } from \"../../../lib/commerce/types\";\nimport { ProductCard } from \"../../product/product-card/product-card\";\nimport { useQuickView } from \"./pdp-quick-view\";\n\n/** A small grid whose cards open the quick view. Any grid can do the same with useQuickView(). */\nexport function QuickViewGrid({ products, className }: { products: Product[]; className?: string }) {\n const qv = useQuickView();\n return (\n

\n {products.map((p, i) => (\n \n ))}\n

\n );\n}\n"},{"path":"blocks/pdp/pdp-buy-box/pdp-buy-box.tsx","code":"$32"},{"path":"blocks/pdp/pdp-gallery/pdp-gallery.tsx","code":"$33"},{"path":"blocks/pdp/_shared/use-variant-selection.ts","code":"$34"},{"path":"blocks/pdp/_shared/use-media-query.ts","code":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n/** SSR-safe matchMedia. `serverValue` is what the server and the hydration pass see. */\nexport function useMediaQuery(query: string, serverValue = false): boolean {\n return useSyncExternalStore(\n (notify) => {\n const mq = window.matchMedia(query);\n mq.addEventListener(\"change\", notify);\n return () => mq.removeEventListener(\"change\", notify);\n },\n () => window.matchMedia(query).matches,\n () => serverValue,\n );\n}\n\n/** md and up: dialogs and side sheets. Below: bottom drawers. */\nexport const useIsDesktop = () => useMediaQuery(\"(min-width: 768px)\", true);\n"},{"path":"blocks/pdp/_shared/crossfade-image.tsx","code":"$35"},{"path":"blocks/pdp/_shared/links.ts","code":"$36"},{"path":"blocks/pdp/pdp-quick-view/demo.tsx","code":"import { pdpDemoData } from \"../../../lib/commerce/fixtures/pdp\";\nimport { CartProvider } from \"../_shared/cart-store\";\nimport { PdpCartDrawer } from \"../pdp-cart-drawer/pdp-cart-drawer\";\nimport { QuickViewProvider } from \"./pdp-quick-view\";\nimport { QuickViewGrid } from \"./quick-view-grid\";\n\nexport async function PdpQuickViewDemo({ brand }: { brand?: string }) {\n const { brand: b, products } = await pdpDemoData(brand);\n const grid = products.slice(0, 6);\n return (\n \n \n

hover a card, press Quick view (always visible on touch)

\n \n

\n \n \n \n );\n}\n\nexport default PdpQuickViewDemo;\n"},{"path":"blocks/pdp/pdp-quick-view/meta.ts","code":"$37"}]}],"props":"$L38"}],"$L39"]}]