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:T2aa0,"use client"; import { useMemo, useState } from "react"; import { IconShirt } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"; import { FilterChips } from "@/components/ui/filter-chips"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { cn } from "@/lib/utils"; import { optionValues } from "../../../lib/commerce/select"; import type { Collection, Product } from "../../../lib/commerce/types"; import { PendingButton } from "../_shared/pending-button"; import { ProductCard, ProductCardSkeleton, type ProductCardVariant } from "../product-card/product-card"; export type ProductGridVariant = "uniform" | "masonry" | "with-sidebar"; export type ProductGridDensity = 2 | 3 | 4 | 5; export type ProductSort = "featured" | "price-asc" | "price-desc" | "title"; const COLUMNS: Record = { 2: "grid-cols-2", 3: "grid-cols-2 md:grid-cols-3", 4: "grid-cols-2 md:grid-cols-3 lg:grid-cols-4", 5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-5", }; const SORT_ITEMS = [ { value: "featured", label: "Featured" }, { value: "price-asc", label: "Price, low to high" }, { value: "price-desc", label: "Price, high to low" }, { value: "title", label: "Name" }, ] as const; /** Fixed tilt set (degrees) the `panel` card cycles through by index. */ export const PANEL_TILTS = [-1.5, 0.75, -0.5, 1.25] as const; function sortProducts(products: Product[], sort: ProductSort): Product[] { if (sort === "featured") return products; const copy = [...products]; if (sort === "price-asc") return copy.sort((a, b) => a.priceRange.min.amount - b.priceRange.min.amount); if (sort === "price-desc") return copy.sort((a, b) => b.priceRange.min.amount - a.priceRange.min.amount); return copy.sort((a, b) => a.title.localeCompare(b.title)); } export type ProductGridProps = { products: Product[]; /** Used for chip labels and the sidebar list. Facets fall back to each product's `collection` handle. */ collections?: Collection[]; variant?: ProductGridVariant; /** Columns on large screens (2 columns on phones always). */ density?: ProductGridDensity; /** Card face for every tile: default, minimal, framed, editorial, compact, dual-ground, window, panel. */ cardVariant?: ProductCardVariant; /** Show the filter chips row (collections). */ filters?: boolean; /** Show the sort select. */ sort?: boolean; /** Initial page size; the rest arrives with the load-more button. Omit to show everything. */ pageSize?: number; /** Called by load-more; return a promise to get the pending state. */ onLoadMore?: () => Promise | void; /** Render skeleton cards instead of products. */ loading?: boolean; onQuickView?: (product: Product) => void; /** Per-card brand metadata slot (see ProductCard `renderMeta`). */ renderMeta?: (product: Product) => React.ReactNode; /** Passed to every card. */ groundPreference?: "auto" | "light" | "dark"; showColors?: boolean; /** Link builder for each tile. */ getHref?: (product: Product) => string; title?: string; className?: string; }; /** Responsive catalog grid: filter chips, sort, designed empty and loading states, load-more. */ export function ProductGrid({ products, collections, variant = "uniform", density = 4, cardVariant = "default", filters = true, sort = true, pageSize, onLoadMore, loading = false, onQuickView, renderMeta, groundPreference, showColors = true, getHref, title, className, }: ProductGridProps) { const [selected, setSelected] = useState([]); const [order, setOrder] = useState("featured"); const [shown, setShown] = useState(pageSize ?? Infinity); const [pending, setPending] = useState(false); const facets = useMemo(() => { const handles = [...new Set(products.map((p) => p.collection))]; return handles.map((handle) => ({ value: handle, label: collections?.find((c) => c.handle === handle)?.title ?? handle, count: products.filter((p) => p.collection === handle).length, })); }, [products, collections]); const visible = useMemo(() => { const filtered = selected.length ? products.filter((p) => selected.includes(p.collection)) : products; return sortProducts(filtered, order); }, [products, selected, order]); // Colour dots only say something when colour differs between designs. const colorsVary = new Set(products.map((p) => optionValues(p, "Color").join("|"))).size > 1; const page = visible.slice(0, shown); const remaining = visible.length - page.length; const sidebar = variant === "with-sidebar"; const showFilters = filters && facets.length > 1; const change = (next: string[]) => { setSelected(next); setShown(pageSize ?? Infinity); }; const more = async () => { if (pending) return; setPending(true); try { await onLoadMore?.(); setShown((n) => n + (pageSize ?? 0)); } finally { setPending(false); } }; const chips = showFilters ? (

) : null; const toolbar = (chips && !sidebar) || sort ? (

{sidebar ? {visible.length} items : chips ?

{chips}

: null} {sort ? ( ) : null}

) : null; const list = (

{toolbar} {sidebar && chips ?

{chips}

: null} {loading ? (

{Array.from({ length: Math.min(density * 2, 8) }, (_, i) => ( ))}

) : page.length === 0 ? ( Nothing in this collection yet Clear the filter to see everything we have. {selected.length ? ( ) : null} ) : (

)} {remaining > 0 && !loading ? (

Show more {remaining} left

) : null}

); return (

{title ?

{title}

: null} {sidebar ? (

Collections {[{ value: "", label: "All", count: products.length }, ...facets].map((facet) => { const on = facet.value === "" ? selected.length === 0 : selected[0] === facet.value; return ( ); })}

{list}

) : ( list )}

); } export default ProductGrid; 31: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; 32:Tb33,import type { Collection, Product, ProductImage } from "../../../lib/commerce/types"; import type { ProductBadgeKind } from "../../ui/product-badge/product-badge"; /** Kobra house curves, written out so Tailwind sees the full class names. */ export const EASE_OUT = "ease-[cubic-bezier(0.23,1,0.32,1)]"; export const EASE_EXIT = "ease-[cubic-bezier(0.4,0,0.6,1)]"; export const FOCUS_RING = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50"; export const productHref = (product: Product) => `/products/${product.handle}`; export const collectionHref = (collection: Collection) => `/collections/${collection.handle}`; export function isSoldOut(product: Product): boolean { return product.variants.length > 0 && product.variants.every((v) => !v.available); } const BLANK = "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'/%3E"; /** Featured image, else the first image, else a transparent placeholder so a product with no art still lays out (the well shows). */ export function primaryImage(product: Product): ProductImage { return product.featuredImage ?? product.images?.[0] ?? { src: BLANK, alt: product.title, width: 1200, height: 1200, hasArt: false }; } /** Second image for hover swaps and gallery insets: skips blank (hasArt === false) and same-view images. */ export function secondaryImage(product: Product, images: ProductImage[] = product.images): ProductImage | undefined { const first = images[0] ?? primaryImage(product); const pool = images.filter((i) => i.src !== first.src && i.hasArt !== false && (i.view ?? "front") !== (first.view ?? "front")); return ( pool.find((i) => i.view === "back") ?? pool.find((i) => i.view === "lifestyle") ?? pool[0] ); } /** Image shown on hover: the first art-bearing image of another view, else no swap. */ export function hoverImage(product: Product): ProductImage | undefined { return secondaryImage(product, [primaryImage(product), ...product.images]); } export function imageSize(image: ProductImage): { width: number; height: number } { return { width: image.width ?? 1200, height: image.height ?? 1200 }; } /** 600w twin + full size when both exist. */ export function imageSrcSet(image: ProductImage): string | undefined { return image.thumb && image.thumb !== image.src ? `${image.thumb} 600w, ${image.src} 1200w` : undefined; } export function hasBackPrint(product: Product): boolean { return product.images.some((i) => i.view === "back"); } export function badgeKindFor(product: Product): ProductBadgeKind | undefined { if (isSoldOut(product)) return "sold-out"; if (product.tags.includes("new")) return "new"; if (hasBackPrint(product)) return "back-print"; return undefined; } export const hasPriceRange = (product: Product) => product.priceRange.min.amount !== product.priceRange.max.amount; 33:T669,"use client"; import type { ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; /** * A busy button keeps its word: the label turns out of view and a spinner turns in, * through one shared flip. `aria-busy`, never `disabled`, and repeat presses are dropped. */ export function PendingButton({ pending = false, children, onClick, className, ...props }: ComponentProps & { pending?: boolean }) { return ( ); } 34:T6df,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Money } from "../../../lib/commerce/types"; const price = cva("tabular inline-flex items-baseline gap-2 text-ink", { variants: { variant: { default: "text-base", large: "display-m", "strike-compare": "text-base", "from-range": "text-base", }, }, defaultVariants: { variant: "default" }, }); export type PriceProps = VariantProps & { money: Money; /** Original price, shown struck through with the `strike-compare` variant. */ compareAt?: Money; /** Upper bound; with `from-range` renders "From $min" or "$min to $max". */ max?: Money; locale?: string; className?: string; }; export function Price({ variant = "default", money, compareAt, max, locale, className, }: PriceProps) { const now = formatMoney(money, locale); if (variant === "strike-compare" && compareAt) { return ( {now} ~~{formatMoney(compareAt, locale)}~~ ); } if (variant === "from-range") { const range = max && max.amount !== money.amount; return ( {range ? ( <> From {now} ) : ( {now} )} ); } return {now}; } 35:T571,"use client"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; export type ProductBadgeKind = | "new" | "back-print" | "sold-out" | "low-stock" | "limited" | "sale" | "coming-soon"; const BADGES: Record< ProductBadgeKind, { label: string; variant: "default" | "outline" | "secondary" | "amber" | "neutral" } > = { new: { label: "New", variant: "default" }, "back-print": { label: "Back print", variant: "outline" }, "sold-out": { label: "Sold out", variant: "secondary" }, "low-stock": { label: "Low stock", variant: "amber" }, limited: { label: "Limited", variant: "outline" }, sale: { label: "Sale", variant: "default" }, "coming-soon": { label: "Coming soon", variant: "neutral" }, }; export type ProductBadgeProps = { kind: ProductBadgeKind; /** Overrides the default label, e.g. a translated string. */ label?: string; className?: string; }; /** Commerce badge: a thin wrapper on Kobra `badge` with the product-state variants. Mono caps. */ export function ProductBadge({ kind, label, className }: ProductBadgeProps) { const badge = BADGES[kind]; return ( {label ?? badge.label} ); } export default ProductBadge; 36:T652,"use client"; import { toast, Toasts } from "@/components/ui/toast"; import { ProductGrid } from "./product-grid"; import { DemoPage, DemoSection } from "../_shared/demo-frame"; import { productFixture, withDemoStates } from "../../../lib/commerce/fixtures/product"; export function ProductGridDemo({ brand }: { brand?: string }) { const fx = productFixture(brand); const products = withDemoStates(fx.products); return (

new Promise((r) => setTimeout(r, 700))} onQuickView={(p) => toast(`Quick view: ${p.title}`)} /> ); } export default ProductGridDemo; 37:T8e8,import type { BlockMeta } from "../../../lib/block-meta"; export const productGridMeta: BlockMeta = { slug: "product-grid", title: "Product grid", description: "Responsive grid of product cards with density 2 to 5, collection filter chips, sort, designed empty and loading states and load-more. Uniform, masonry (first tile spans 2) and with-sidebar.", group: "product", kobraDeps: ["filter-chips", "select", "empty", "button", "skeleton", "spinner", "badge"], files: [ "blocks/product/product-grid/product-grid.tsx", "blocks/product/product-card/product-card.tsx", "blocks/product/_shared/product-utils.ts", "blocks/product/_shared/pending-button.tsx", "blocks/ui/price/price.tsx", "blocks/ui/product-badge/product-badge.tsx", "blocks/ui/swatch/colors.ts", ], props: [ { name: "products", type: "Product[]", description: "Products to list." }, { name: "collections", type: "Collection[]", description: "Chip and sidebar labels." }, { name: "variant", type: "'uniform' | 'masonry' | 'with-sidebar'", default: "'uniform'", description: "Layout." }, { name: "density", type: "2 | 3 | 4 | 5", default: "4", description: "Columns on large screens." }, { name: "filters", type: "boolean", default: "true", description: "Collection filter chips." }, { name: "sort", type: "boolean", default: "true", description: "Sort select." }, { name: "pageSize", type: "number", description: "Initial count; the rest loads with the button." }, { name: "onLoadMore", type: "() => Promise | void", description: "Async load-more; a promise drives the pending state." }, { name: "loading", type: "boolean", default: "false", description: "Skeleton cards." }, { name: "cardVariant", type: "ProductCardVariant", default: "'default'", description: "Card face for every tile (all eight faces)." }, { name: "renderMeta", type: "(product: Product) => ReactNode", description: "Per-card brand metadata slot." }, { name: "groundPreference", type: "'auto' | 'light' | 'dark'", description: "Passed to every card." }, { name: "onQuickView", type: "(product: Product) => void", description: "Enables the card quick-view button." }, ], tags: ["grid", "catalog", "filter", "sort"], 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":"/#product","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Product"}]}],["$","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":"Product grid"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Product grid"}],["$","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":"Responsive grid of product cards with density 2 to 5, collection filter chips, sort, designed empty and loading states and load-more. Uniform, masonry (first tile spans 2) and with-sidebar."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"product-grid","group":"product","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/product/product-grid/product-grid.tsx","code":"$30"},{"path":"blocks/product/product-card/product-card.tsx","code":"$31"},{"path":"blocks/product/_shared/product-utils.ts","code":"$32"},{"path":"blocks/product/_shared/pending-button.tsx","code":"$33"},{"path":"blocks/ui/price/price.tsx","code":"$34"},{"path":"blocks/ui/product-badge/product-badge.tsx","code":"$35"},{"path":"blocks/ui/swatch/colors.ts","code":"// Garment color name -> CSS color for swatch dots. Unknown names fall back to a\n// neutral so a new Printify color never renders as an invisible dot.\nconst COLORS: Record = {\n black: \"#101010\",\n white: \"#ffffff\",\n navy: \"#1b2a49\",\n \"forest green\": \"#1f3d2b\",\n green: \"#2f6b3f\",\n red: \"#b3262d\",\n maroon: \"#5e1b26\",\n royal: \"#2a4aa8\",\n blue: \"#2f5fb3\",\n \"light blue\": \"#a9c1e8\",\n grey: \"#8a8a8a\",\n gray: \"#8a8a8a\",\n \"sport grey\": \"#9a9a9a\",\n charcoal: \"#3a3a3a\",\n \"dark heather\": \"#3b3d42\",\n heather: \"#b5b5b5\",\n sand: \"#d8cdb4\",\n natural: \"#e8dfcb\",\n cream: \"#f1ead8\",\n tan: \"#c2a67c\",\n brown: \"#5b3d2a\",\n pink: \"#e8a5b8\",\n purple: \"#5b3a8c\",\n yellow: \"#e8c935\",\n gold: \"#c79a2b\",\n orange: \"#d9692b\",\n \"stone blue\": \"#7d93a6\",\n pepper: \"#4a4a48\",\n \"washed black\": \"#2b2b2b\",\n};\n\nexport function colorValue(name: string): string {\n return COLORS[name.trim().toLowerCase()] ?? \"#c8c6c0\";\n}\n"},{"path":"blocks/product/product-grid/demo.tsx","code":"$36"},{"path":"blocks/product/product-grid/meta.ts","code":"$37"}]}],"props":"$L38"}],"$L39"]}]