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/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"],""] 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/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"] 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/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"] 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/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"] 30:Tbb6,"use client"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { ProductCard } from "../../product/product-card/product-card"; import { resolveProductHref, type PdpHrefs, type ProductHref } from "../_shared/links"; import { useQuickView } from "../pdp-quick-view/pdp-quick-view"; export type PdpRelatedProps = { /** The product being viewed; excluded from the strip. */ product: Product; /** Candidate pool (the catalog or a collection). Same-collection products come first. */ products: Product[]; title?: string; /** 4 to 8 products. */ limit?: number; /** rail: scroll-snap strip with a peeking card. grid: four-up. */ variant?: "rail" | "grid"; hrefFor?: ProductHref; /** Route overrides (product). hrefFor wins when both are given. */ hrefs?: PdpHrefs; /** Let the rail bleed to the viewport edges (-mx gutters). Off by default; turn on only when the rail sits directly in the page gutter (px-4 sm:px-6 lg:px-10). */ bleed?: boolean; className?: string; }; export function relatedProducts(product: Product, pool: Product[], limit = 8): Product[] { const others = pool.filter((p) => p.handle !== product.handle); const same = others.filter((p) => p.collection === product.collection); const rest = others.filter((p) => p.collection !== product.collection); return [...same, ...rest].slice(0, Math.max(4, Math.min(8, limit))); } /** A collection-rail style strip of products from the same collection. Cards open the quick view when a QuickViewProvider is above. */ export function PdpRelated({ product, products, title = "More from this collection", limit = 8, variant = "rail", hrefFor: hrefForProp, hrefs, bleed = false, className, }: PdpRelatedProps) { const hrefFor = resolveProductHref(hrefForProp, hrefs); const qv = useQuickView(); const items = relatedProducts(product, products, limit); if (items.length === 0) return null; return (

{title}

); } export default PdpRelated; 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:T3b90,"use client"; import { IconEye } from "@tabler/icons-react"; import { cva } from "class-variance-authority"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { optionValues } from "../../../lib/commerce/select"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { ProductBadge, type ProductBadgeKind } from "../../ui/product-badge/product-badge"; import { colorValue } from "../../ui/swatch/colors"; import { groundsOf } from "../_shared/grounds"; import { badgeKindFor, hasPriceRange, hoverImage, imageSize, imageSrcSet, isSoldOut, primaryImage, productHref, } from "../_shared/product-utils"; export type ProductCardVariant = | "default" | "minimal" | "framed" | "editorial" | "compact" /** One tile, two wells: the same product on a light ground and a dark ground (onlycolor). */ | "dual-ground" /** Retro OS window: 28px title bar, mono title, the image inside (lonelyboi). */ | "window" /** Comic panel: 2px ink border, tilted, a big display-font caption strip (doodledude). */ | "panel"; const card = cva("group/card relative isolate min-w-0", { variants: { variant: { default: "grid content-start gap-3", minimal: "grid content-start gap-2", framed: "grid content-start gap-3 rounded-brand border border-rule bg-canvas p-2 transition-[box-shadow,border-color] duration-150 ease-out hover:border-ink/30 motion-reduce:transition-none", editorial: "grid content-start gap-4", compact: "flex items-center gap-3", "dual-ground": "grid content-start gap-3", window: "grid content-start overflow-hidden rounded-brand border border-rule bg-canvas", panel: "grid content-start rounded-[3px] border-2 border-ink bg-canvas rotate-(--tilt) transition-transform duration-150 ease-out hover:rotate-0 motion-reduce:transition-none motion-reduce:hover:rotate-(--tilt)", }, fill: { true: "h-full grid-rows-[1fr_auto]", lg: "lg:h-full lg:grid-rows-[1fr_auto]", false: "" }, }, defaultVariants: { variant: "default", fill: false }, }); // No `isolate` here: the frame must not form a stacking context, or its controls (z-10) would sit under the stretched link. const frame = cva("relative block overflow-hidden bg-surface-product", { variants: { variant: { default: "aspect-[6/7] rounded-brand", minimal: "aspect-[6/7] rounded-none bg-transparent", framed: "aspect-[6/7] rounded-[max(2px,calc(var(--kc-radius)-0.5rem))]", editorial: "aspect-[4/5] rounded-brand", compact: "aspect-square w-20 shrink-0 rounded-control", "dual-ground": "grid aspect-[11/6] grid-cols-2 rounded-brand bg-transparent", window: "aspect-[6/7] rounded-none", panel: "aspect-[6/7] rounded-none border-b-2 border-ink", }, fill: { true: "aspect-auto min-h-0", lg: "lg:aspect-auto lg:min-h-0", false: "" }, }, defaultVariants: { variant: "default", fill: false }, }); const title = cva( "font-display leading-tight text-ink [text-transform:var(--kc-display-transform)] [overflow-wrap:anywhere]", { variants: { variant: { default: "text-base", minimal: "text-sm", framed: "text-base", editorial: "display-m", compact: "text-sm", "dual-ground": "text-base", window: "text-base", panel: "text-xl tracking-normal", }, }, defaultVariants: { variant: "default" }, }, ); export type ProductCardProps = { product: Product; variant?: ProductCardVariant; /** Where the tile goes. Defaults to `/products/`. */ href?: string; /** Called by the quick-view button (hover/focus on desktop, always visible on touch). Omit to hide the button. */ onQuickView?: (product: Product) => void; /** Override the auto badge (sold out, new, back print). `false` hides it. */ badge?: ProductBadgeKind | false; /** Show color dots from the Color option. */ showColors?: boolean; /** Mono index shown over the image, e.g. 41 renders "plate 041" with the default label. Only for catalogs that carry an index. */ index?: number; /** Word before the index. */ indexLabel?: string; /** Slot under the title and price row, inside the tile and outside the link (brand metadata, e.g. a colorway band). Not interactive. */ renderMeta?: (product: Product) => React.ReactNode; /** Which ground to show first: `dark` or `light` picks the matching garment image when the product has both. Templates pass it from their theme. */ groundPreference?: "auto" | "light" | "dark"; /** Rotation in degrees for `panel`. Grids pass a fixed set by index; 0 when omitted. */ tilt?: number; /** Fill the parent's height (a spanning grid tile). `"lg"` only fills from the lg breakpoint up. */ fill?: boolean | "lg"; /** Load the primary image eagerly (above the fold). */ priority?: boolean; sizes?: string; locale?: string; className?: string; }; const MAX_DOTS = 4; /** * The atom. One tile, one link (a stretched anchor); the quick-view button is a sibling * above it, so there are no nested interactives. Hover crossfades to the second image in 150ms. */ export function ProductCard({ product, variant = "default", href, onQuickView, badge, showColors = false, index, indexLabel = "plate", tilt = 0, renderMeta, groundPreference = "auto", fill = false, priority = false, sizes = "(min-width: 1024px) 25vw, 50vw", locale, className, }: ProductCardProps) { const grounds = groundPreference === "auto" ? null : groundsOf(product); const primary = (groundPreference === "dark" ? grounds?.dark : groundPreference === "light" ? grounds?.light : undefined) ?? primaryImage(product); const second = variant === "compact" || variant === "dual-ground" ? undefined : hoverImage(product); const wells = variant === "dual-ground" ? (groundsOf(product) ?? { light: primary, dark: hoverImage(product) ?? primary }) : null; const soldOut = isSoldOut(product); const kind = badge === false ? undefined : (badge ?? badgeKindFor(product)); const colors = showColors ? optionValues(product, "Color") : []; const showLine = product.line && product.line.toLowerCase() !== product.title.toLowerCase(); const isFill = variant !== "compact" && fill; const link = href ?? productHref(product); return (

{variant === "window" ? (

{product.handle}.exe

) : null}

{wells ? ( [ { image: wells.light, ground: "bg-surface-product", first: true }, { image: wells.dark, ground: "bg-ink", first: false }, ].map(({ image, ground, first }) => (

)) ) : ( <>

{second ? (

) : null} )} {kind && variant !== "compact" ? : null} {index !== undefined && variant !== "compact" ? ( {indexLabel} {String(index).padStart(3, "0")} ) : null} {onQuickView && variant !== "compact" ? ( ) : null}

{product.title}

{showLine && variant !== "minimal" && variant !== "panel" ?

{product.line}

: null}

{soldOut ? ( Sold out ) : ( )} {colors.length > 1 && variant !== "minimal" ? ( {colors.slice(0, MAX_DOTS).map((name) => ( ))} {colors.length > MAX_DOTS ? ( +{colors.length - MAX_DOTS} ) : null} ) : null}

{renderMeta ?

{renderMeta(product)}

: null}

); } /** Loading state the size of what is coming. Same grid, same aspect, no layout shift. */ export function ProductCardSkeleton({ variant = "default", fill = false, className, }: { variant?: ProductCardVariant; fill?: boolean | "lg"; className?: string; }) { const isFill = variant !== "compact" && fill; return (

); } export default ProductCard; 33: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(); } 34:T66c,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpRelatedMeta: BlockMeta = { slug: "pdp-related", title: "Related products", description: "A strip of 4 to 8 products from the same collection: scroll-snap rail with a peeking card, or a four-up grid. Uses product-card and opens the quick view when one is mounted.", group: "pdp", kobraDeps: ["button", "skeleton"], files: [ "blocks/pdp/pdp-related/pdp-related.tsx", "blocks/pdp/pdp-quick-view/pdp-quick-view.tsx", "blocks/product/product-card/product-card.tsx", "blocks/pdp/_shared/links.ts", ], props: [ { name: "hrefs", type: "{ home?: string; collection?: (handle) => string; product?: (handle) => string }", default: "'/', /collections/, /products/", description: "Route overrides (product); hrefFor wins when both are set." }, { name: "bleed", type: "boolean", default: "false", description: "Let the rail bleed into the page gutters (-mx). Only enable when the rail sits directly in a px-4 sm:px-6 lg:px-10 gutter." }, { name: "product", type: "Product", description: "Current product (excluded)." }, { name: "products", type: "Product[]", description: "Pool to pick from; same collection first." }, { name: "variant", type: "'rail' | 'grid'", default: "'rail'", description: "Layout." }, { name: "limit", type: "number", default: "8", description: "4 to 8." }, { name: "title", type: "string", description: "Heading." }, { name: "hrefFor", type: "(product) => string", default: "/products/", description: "Card links." }, ], tags: ["pdp", "related", "rail"], 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":"Related products"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Related products"}],["$","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":"A strip of 4 to 8 products from the same collection: scroll-snap rail with a peeking card, or a four-up grid. Uses product-card and opens the quick view when one is mounted."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"pdp-related","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/pdp/pdp-related/pdp-related.tsx","code":"$30"},{"path":"blocks/pdp/pdp-quick-view/pdp-quick-view.tsx","code":"$31"},{"path":"blocks/product/product-card/product-card.tsx","code":"$32"},{"path":"blocks/pdp/_shared/links.ts","code":"$33"},{"path":"blocks/pdp/pdp-related/demo.tsx","code":"import { pdpDemoData } from \"../../../lib/commerce/fixtures/pdp\";\nimport { CartProvider } from \"../_shared/cart-store\";\nimport { QuickViewProvider } from \"../pdp-quick-view/pdp-quick-view\";\nimport { PdpRelated } from \"./pdp-related\";\n\nexport async function PdpRelatedDemo({ brand }: { brand?: string }) {\n const { brand: b, product, products, catalog } = await pdpDemoData(brand);\n const pool = catalog.products.slice(0, 24);\n return (\n \n \n

\n \n \n

\n \n \n );\n}\n\nexport default PdpRelatedDemo;\n"},{"path":"blocks/pdp/pdp-related/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]