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:T10b9,"use client"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import type { Collection, Product } from "../../../lib/commerce/types"; import type { PdpHrefs } from "../_shared/links"; import { WindowFrame, type WindowTone } from "../_shared/window-frame"; import { VariantSelectionProvider, type UseVariantSelectionOptions } from "../_shared/use-variant-selection"; import { PdpBreadcrumb } from "../pdp-breadcrumb/pdp-breadcrumb"; import { PdpBuyBox } from "../pdp-buy-box/pdp-buy-box"; import { PdpDetailsAccordion, type PdpAccordionCopy } from "../pdp-details-accordion/pdp-details-accordion"; import { PdpGallery } from "../pdp-gallery/pdp-gallery"; import { PdpStickyBuyBar } from "../pdp-sticky-buy-bar/pdp-sticky-buy-bar"; export type PdpLayoutProps = { product: Product; collection?: Pick; /** * 7-5: thumbnail gallery 7 cols, sticky buy column 5. 6-6: even split. * stacked-scroll: every image stacked on the left while the buy box stays put. */ variant?: "7-5" | "6-6" | "stacked-scroll"; brandSlug?: string; /** Route overrides for the breadcrumb (home, collection). */ hrefs?: PdpHrefs; /** Product and buy box as two title-bar windows (playful brands). */ windows?: boolean; windowTone?: WindowTone; /** Brand copy for the accordion sections. */ accordionDefaults?: Partial; /** Show the accordion under the buy box (default true). */ accordions?: boolean; /** Mount the sticky buy bar (appears when the buy box scrolls out). */ stickyBar?: boolean; sizes?: UseVariantSelectionOptions["sizes"]; soldOutSizes?: string[]; /** Extra content under the accordion in the buy column (shipping estimator, notes). */ children?: ReactNode; className?: string; }; /** The PDP top section: gallery + buy box + details in a 7/5 (or 6/6) grid with a sticky buy column. */ export function PdpLayout({ product, collection, variant = "7-5", brandSlug, hrefs, windows, windowTone, accordionDefaults, accordions = true, stickyBar, sizes, soldOutSizes, children, className, }: PdpLayoutProps) { const stacked = variant === "stacked-scroll"; const left = variant === "6-6" ? "lg:col-span-6" : "lg:col-span-7"; const right = variant === "6-6" ? "lg:col-span-6" : "lg:col-span-5"; return (

{windows ? ( ) : ( )}

{stacked ? null : accordions ? : null} {stacked ? null : children}

{stacked && (accordions || children) ? (

{accordions ? : null} {children}

) : null} {stickyBar ? : null}

); } export default PdpLayout; 31: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; 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:Tdba,"use client"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type AccordionVariant } from "@/components/ui/accordion"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; export type PdpAccordionCopy = { fabricAndFit: string; shippingAndReturns: string; care: string; }; /** Neutral print-on-demand defaults. Brands override through `defaults`; product fields fill Details. */ export const defaultAccordionCopy: PdpAccordionCopy = { fabricAndFit: "Fabric and fit depend on the garment you choose. Use the size guide for measurements, and size up for a relaxed fit.", shippingAndReturns: "Made to order: your piece is printed after you buy it, then shipped. Delivery estimates and the returns policy are shown at checkout on the store.", care: "Wash cold, inside out, with like colors. Tumble dry low or hang dry. Do not iron the print. Do not dry clean.", }; export type PdpDetailsAccordionProps = { product: Product; /** Brand copy for the sections the product data does not carry. */ defaults?: Partial; /** Item values open on mount. */ defaultOpen?: ("details" | "fabric" | "shipping" | "care")[]; variant?: AccordionVariant; className?: string; }; function Mono({ children }: { children: string }) { return {children}; } export function PdpDetailsAccordion({ product, defaults, defaultOpen = ["details"], variant = "primary", className, }: PdpDetailsAccordionProps) { const copy = { ...defaultAccordionCopy, ...defaults }; const garments = product.options.find((o) => o.name === "Garment")?.values ?? []; const colors = product.options.find((o) => o.name === "Color")?.values ?? []; return ( Details

{product.description}

{garments.length || colors.length ? (

Garments: {garments.join(", ")}
Colors: {colors.join(", ")}

) : null} Fabric and fit

{copy.fabricAndFit}

Shipping and returns

{copy.shippingAndReturns}

Care

{copy.care}

); } export default PdpDetailsAccordion; 34:T750,"use client"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"; import { cn } from "@/lib/utils"; import type { Collection, Product } from "../../../lib/commerce/types"; import { humanize, type PdpHrefs } from "../_shared/links"; export type PdpBreadcrumbProps = { product: Product; collection?: Pick; homeLabel?: string; homeHref?: string; collectionHref?: (handle: string) => string; /** Route overrides; take precedence over homeHref / collectionHref. */ hrefs?: PdpHrefs; className?: string; }; /** Home / collection / product on Kobra breadcrumb. */ export function PdpBreadcrumb({ product, collection, homeLabel = "Home", homeHref = "/", collectionHref: collectionHrefProp, hrefs, className, }: PdpBreadcrumbProps) { const home = hrefs?.home ?? homeHref; const collectionHref = hrefs?.collection ?? collectionHrefProp ?? ((h: string) => `/collections/${h}`); const handle = collection?.handle ?? product.collection; const title = collection?.title ?? humanize(product.collection); return ( {homeLabel} {handle ? ( <> {title} ) : null} {product.title} ); } export default PdpBreadcrumb; 35:T194a,"use client"; import { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { PendingButton } from "../_shared/pending-button"; import { EASE_EXIT, EASE_OUT } from "../_shared/motion"; 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"; const SuppressContext = createContext<{ suppressed: boolean; setSuppressed: (s: boolean) => void }>({ suppressed: false, setSuppressed: () => {}, }); /** Wrap the PDP once; a tab (Customize) calls useStickyBarControl().setSuppressed(true) to hide the bar. */ export function StickyBarProvider({ children }: { children: ReactNode }) { const [suppressed, setSuppressed] = useState(false); const value = useMemo(() => ({ suppressed, setSuppressed }), [suppressed]); return {children}; } export const useStickyBarSuppressed = () => useContext(SuppressContext).suppressed; export const useStickyBarControl = () => useContext(SuppressContext); export type PdpStickyBuyBarProps = { product: Product; selection?: VariantSelection; /** CSS selector of the buy box to watch. The bar appears once it has scrolled out of view above. */ watch?: string; /** fixed: pinned to the viewport edge. sticky: pinned inside a scroll container (galleries, previews). */ position?: "fixed" | "sticky"; /** bottom (default) or top edge. */ edge?: "bottom" | "top"; /** Show regardless of scroll (previews, tests). */ forceVisible?: boolean; /** Pre-drop: the button reads a disabled "Drops in 13d" until dropsAt. */ locked?: Locked; /** Hide the bar (and clear --kc-sticky-offset), e.g. while a Customize tab is active. Also honors StickyBarProvider. */ suppressed?: boolean; className?: string; }; /** One hairline strip: thumbnail, title, price, small Add. Slides in over 200ms (--ease-out), out in 150ms; reduced motion fades only. */ export function PdpStickyBuyBar({ product, selection, watch = "[data-kc-buy-box]", position = "fixed", edge = "bottom", forceVisible, locked, suppressed, className, }: PdpStickyBuyBarProps) { const sel = useResolvedSelection(product, selection); const { pending, add } = useAddToCart(sel); const [past, setPast] = useState(false); const bar = useRef(null); const drop = useLocked(locked); useEffect(() => { const target = document.querySelector(watch); if (!target || typeof IntersectionObserver === "undefined") return; const io = new IntersectionObserver( ([entry]) => setPast(!entry.isIntersecting && entry.boundingClientRect.bottom < 0), { threshold: 0 }, ); io.observe(target); return () => io.disconnect(); }, [watch]); const hiddenByContext = useStickyBarSuppressed(); const visible = !(suppressed || hiddenByContext) && (forceVisible || past); // Publish the bar height as --kc-sticky-offset on while visible, so toasts stack above it. useEffect(() => { const el = bar.current; if (!el || !visible || position !== "fixed" || edge !== "bottom") return; const set = () => document.body.style.setProperty("--kc-sticky-offset", `${el.offsetHeight}px`); set(); const ro = new ResizeObserver(set); ro.observe(el); return () => { ro.disconnect(); document.body.style.removeProperty("--kc-sticky-offset"); }; }, [visible, position, edge]); const image = sel.image ?? product.featuredImage; const top = edge === "top"; const onAdd = async () => { if (!sel.available || drop.locked) return; if (sel.needsSize && !sel.size) { sel.flagSizeError(); document.querySelector(watch)?.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", block: "center", }); return; } await add(1); }; return (

{/* eslint-disable-next-line @next/next/no-img-element */}

{product.title}

{[sel.selected.Garment, sel.selected.Color, sel.needsSize ? sel.size : undefined].filter(Boolean).join(" / ")}

{drop.locked ? ( {drop.label} {drop.text} ) : sel.available ? (sel.needsSize && !sel.size ? "Choose size" : "Add") : "Sold out"}

); } export default PdpStickyBuyBar; 36: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; } 37:T6b1,import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; /** Title-bar window (the lonelyboi move): accent title bar with three dots, hairline body. Tokens only. */ export type WindowTone = "quiet" | "accent" | "accent-solid"; const TONES: Record = { /** Surface bar, ink title, accent dots. Safe for every brand. */ quiet: "bg-surface text-ink border-b border-rule", /** Accent bar with ink title: for light accents (lonelyboi blue). */ accent: "bg-accent-brand text-ink", /** Accent bar with the accent-foreground title: for dark accents. */ "accent-solid": "bg-accent-brand text-accent-brand-foreground", }; export function WindowFrame({ title, children, className, bodyClassName, tone = "quiet", }: { title: string; children: ReactNode; className?: string; bodyClassName?: string; tone?: WindowTone; }) { return (

{title}

{children}

); } 38:T4c7,import { pdpDemoData } from "../../../lib/commerce/fixtures/pdp"; import { CartProvider } from "../_shared/cart-store"; import { PdpCartDrawer } from "../pdp-cart-drawer/pdp-cart-drawer"; import { PdpLayout } from "./pdp-layout"; export async function PdpLayoutDemo({ brand }: { brand?: string }) { const { brand: b, product, catalog, products } = await pdpDemoData(brand); const collection = catalog.collections.find((c) => c.handle === product.collection); const playful = b.slug === "lonelyboi"; return (

{(["7-5", "6-6", "stacked-scroll"] as const).map((variant) => (

{variant}

))}

); } export default PdpLayoutDemo; 39:T7ec,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpLayoutMeta: BlockMeta = { slug: "pdp-layout", title: "PDP layout (hero split)", description: "The PDP top section: breadcrumb, gallery and buy box in a 7/5 or 6/6 grid with a sticky buy column, or a stacked-scroll gallery beside a sticky buy box. Optional title-bar windows for playful brands.", group: "pdp", kobraDeps: ["carousel", "lightbox", "accordion", "breadcrumb", "toggle-group", "button", "sheet", "drawer", "tooltip", "select", "table"], files: [ "blocks/pdp/pdp-layout/pdp-layout.tsx", "blocks/pdp/pdp-gallery/pdp-gallery.tsx", "blocks/pdp/pdp-buy-box/pdp-buy-box.tsx", "blocks/pdp/pdp-details-accordion/pdp-details-accordion.tsx", "blocks/pdp/pdp-breadcrumb/pdp-breadcrumb.tsx", "blocks/pdp/pdp-sticky-buy-bar/pdp-sticky-buy-bar.tsx", "blocks/pdp/_shared/use-variant-selection.ts", "blocks/pdp/_shared/window-frame.tsx", ], props: [ { name: "hrefs", type: "{ home?: string; collection?: (handle) => string; product?: (handle) => string }", default: "'/', /collections/, /products/", description: "Route overrides forwarded to the breadcrumb so a template under a prefix links inside itself." }, { name: "product", type: "Product", description: "The product." }, { name: "variant", type: "'7-5' | '6-6' | 'stacked-scroll'", default: "'7-5'", description: "Grid proportions / gallery mode." }, { name: "collection", type: "{ handle; title }", description: "For the breadcrumb." }, { name: "windows", type: "boolean", description: "Gallery and buy box as title-bar windows." }, { name: "stickyBar", type: "boolean", description: "Mount the sticky buy bar." }, { name: "accordionDefaults", type: "Partial", description: "Brand copy for the accordion." }, { name: "children", type: "ReactNode", description: "Extra content under the accordion in the sticky column." }, ], tags: ["pdp", "layout", "hero", "sticky"], 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 layout (hero split)"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"PDP layout (hero split)"}],["$","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 PDP top section: breadcrumb, gallery and buy box in a 7/5 or 6/6 grid with a sticky buy column, or a stacked-scroll gallery beside a sticky buy box. Optional title-bar windows for playful brands."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"pdp-layout","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/pdp/pdp-layout/pdp-layout.tsx","code":"$30"},{"path":"blocks/pdp/pdp-gallery/pdp-gallery.tsx","code":"$31"},{"path":"blocks/pdp/pdp-buy-box/pdp-buy-box.tsx","code":"$32"},{"path":"blocks/pdp/pdp-details-accordion/pdp-details-accordion.tsx","code":"$33"},{"path":"blocks/pdp/pdp-breadcrumb/pdp-breadcrumb.tsx","code":"$34"},{"path":"blocks/pdp/pdp-sticky-buy-bar/pdp-sticky-buy-bar.tsx","code":"$35"},{"path":"blocks/pdp/_shared/use-variant-selection.ts","code":"$36"},{"path":"blocks/pdp/_shared/window-frame.tsx","code":"$37"},{"path":"blocks/pdp/pdp-layout/demo.tsx","code":"$38"},{"path":"blocks/pdp/pdp-layout/meta.ts","code":"$39"}]}],"props":"$L3a"}],"$L3b"]}]