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:T3035,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { IconMenu2, IconSearch } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { CommandMenu, openCommandMenu, type CommandMenuAction } from "@/components/ui/command-menu"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from "@/components/ui/navigation-menu"; import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Brand, Collection, Product } from "../../../lib/commerce/types"; import { CartButton } from "../../ui/cart-button/cart-button"; import { ProductPicture } from "../../ui/_kit/product-picture"; import { defaultProductHref, type NavLink, type ProductHref } from "../../ui/_kit/types"; import { Wordmark } from "../../ui/wordmark/wordmark"; export type SiteNavProps = { brand: Brand; links: NavLink[]; /** Mega variant: collections listed under the first link's menu ("Shop"). */ collections?: Collection[]; /** Search results and collection imagery. */ products?: Product[]; /** Cart count is a prop; this block holds no cart state. */ cartCount?: number; cartHref?: string; onCartClick?: () => void; /** `sticky` goes from transparent to solid once the page scrolls. */ variant?: "minimal" | "centered" | "mega" | "sticky"; /** Show the search button and mount the command menu (Cmd/Ctrl+K). Mount one per page. */ search?: boolean; productHref?: ProductHref; /** Where a collection links (mega menu, mobile sheet). Receives the collection handle. */ collectionHref?: (handle: string) => string; /** Where the wordmark links. */ homeHref?: string; /** Called with the destination of a search result. Defaults to location.assign. */ onNavigate?: (href: string) => void; className?: string; }; const linkClass = "inline-flex h-10 items-center rounded-control px-3 text-sm outline-none transition-colors duration-150 ease-out hover:text-ink-muted focus-visible:ring-3 focus-visible:ring-ring/50 motion-reduce:transition-none"; function Links({ links, className }: { links: NavLink[]; className?: string }) { return (

{l.href ? ( {l.label} ) : ( {l.label} )}

); } /** Lower is better; -1 drops the product from the results. */ function rankProduct(p: Product, q: string): number { const title = p.title.toLowerCase(); if (title.startsWith(q)) return 0; if (title.split(/[^\p{L}\p{N}]+/u).some((w) => w.startsWith(q))) return 1; if (title.includes(q)) return 2; if (p.handle.toLowerCase().includes(q)) return 3; if (p.collection.toLowerCase().includes(q)) return 4; return -1; } /** Brand, links, search (Kobra command-menu), cart count, and a Kobra sheet menu on small screens. */ export function SiteNav({ brand, links, collections = [], products = [], cartCount = 0, cartHref, onCartClick, variant = "minimal", search = true, productHref = defaultProductHref, collectionHref = (handle) => `/collections/${handle}`, homeHref = "/", onNavigate = (href) => window.location.assign(href), className, }: SiteNavProps) { const sticky = variant === "sticky"; const [solid, setSolid] = useState(!sticky); const sentinel = useRef(null); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { if (!sticky || !sentinel.current) return; const io = new IntersectionObserver(([entry]) => setSolid(!entry.isIntersecting), { threshold: 0 }); io.observe(sentinel.current); return () => io.disconnect(); }, [sticky]); // The command menu's own filter is a fuzzy subsequence match that keeps source order. To make Enter open // the right product, we pre-rank per query: exact title prefix > word start in title > title substring > // handle > collection. Unrelated fuzzy matches are dropped. The query is read from the menu's input. const [query, setQuery] = useState(""); useEffect(() => { if (!search) return; const read = (e: Event) => { const t = e.target; if (t instanceof HTMLInputElement && t.classList.contains("command-input")) setQuery(t.value); }; document.addEventListener("input", read, true); document.addEventListener("focusin", read, true); return () => { document.removeEventListener("input", read, true); document.removeEventListener("focusin", read, true); }; }, [search]); const actions = useMemo(() => { const q = query.trim().toLowerCase(); const scored = products .map((p, index) => ({ p, index, rank: q ? rankProduct(p, q) : 0 })) .filter((x) => x.rank >= 0) .sort((a, b) => a.rank - b.rank || (q ? a.p.title.length - b.p.title.length : 0) || a.index - b.index); return scored.map(({ p }) => ({ id: p.handle, label: p.title, group: "Products", hint: formatMoney(p.priceRange.min), keywords: q ? [q] : [], icon: ( ), action: () => onNavigate(productHref(p)), })); }, [products, productHref, onNavigate, query]); const imageFor = (c: Collection) => { const p = products.find((x) => c.products.includes(x.handle)); return p?.featuredImage; }; const centered = variant === "centered"; const mega = variant === "mega" && collections.length > 0; const [shop, ...rest] = links; const mobileMenu = ( } /> {brand.name}

{links.map((l) => l.href ? ( } nativeButton={false} className="display-m rounded-control px-2 py-2.5 text-ink outline-none focus-visible:ring-3 focus-visible:ring-ring/50" > {l.label} ) : null, )} {mega ? (

Collections {collections.map((c) => { const img = imageFor(c); return ( } nativeButton={false} className="flex items-center gap-3 rounded-control p-2 text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50" > {img ? ( ) : null} {c.title} ); })}

) : null}

); const tools = (

{search ? ( ) : null}

); return ( <> {sticky ?

: null}

{centered ? (

{mobileMenu}

) : (

{mobileMenu}

)} {centered ? ( ) : mega ? ( {shop ? ( {shop.label}

{img ? : null} {c.title} {c.blurb}

) : null} {rest.map((l) => ( {l.href ? ( {l.label} ) : null} ))} ) : ( )} {tools}

{search ? : null} ); } export default SiteNav; 31:T505,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import type { Brand } from "../../../lib/commerce/types"; const wordmark = cva( "inline-block font-display leading-none text-ink [text-transform:var(--kc-display-transform)]", { variants: { size: { sm: "text-base tracking-tight", md: "text-xl tracking-tight", lg: "display-m", xl: "display-xl whitespace-nowrap", }, }, defaultVariants: { size: "md" }, }, ); export type WordmarkProps = VariantProps & { brand: Pick; /** Renders a link when set. */ href?: string; className?: string; }; /** Brand name set in the brand display face. CAPS follow `--kc-display-transform`. */ export function Wordmark({ brand, size, href, className }: WordmarkProps) { const classes = cn(wordmark({ size }), className); if (href) { return ( {brand.name} ); } return {brand.name}; } export default Wordmark; 32:T5b2,"use client"; import { IconShoppingBag } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type CartButtonProps = { /** Items in the cart. The count is a prop; cart state lives elsewhere. */ count?: number; /** Renders a link when set, otherwise a button. */ href?: string; onClick?: () => void; className?: string; }; /** Bag icon with a tabular count badge. 40px hit area, badge hides at zero. */ export function CartButton({ count = 0, href, onClick, className }: CartButtonProps) { const label = count === 1 ? "Cart, 1 item" : `Cart, ${count} items`; return ( ); } export default CartButton; 33:T50a,import type { ProductImage } from "../../../lib/commerce/types"; import { cn } from "@/lib/utils"; export type ProductPictureProps = { image: ProductImage; /** `sizes` attribute. Defaults to a half-viewport guess. */ sizes?: string; loading?: "eager" | "lazy"; /** Use for the one above-the-fold LCP image. */ priority?: boolean; className?: string; }; /** * Plain for a product mockup. Uses the 600px twin as the small source when one exists, * always carries width/height so the box is reserved before the image arrives. */ export function ProductPicture({ image, sizes = "(min-width: 768px) 50vw, 100vw", loading = "lazy", priority = false, className, }: ProductPictureProps) { const width = image.width ?? 1200; const height = image.height ?? 1200; return ( // eslint-disable-next-line @next/next/no-img-element {image.alt}

); } 34:Ta9c,import type { Money, Product, ProductImage, Variant } from "./types"; /** Price range of a variant list. Empty list gives a zero range in `currency`. */ export function priceRangeOf( variants: Variant[], currency = "USD", ): { min: Money; max: Money } { if (variants.length === 0) { const zero = { amount: 0, currency }; return { min: zero, max: zero }; } const sorted = [...variants].sort((a, b) => a.price.amount - b.price.amount); return { min: sorted[0].price, max: sorted[sorted.length - 1].price }; } /** Lowest priced variant, preferring available ones. Undefined when the product has no variants. */ export function findCheapestVariant(product: Product): Variant | undefined { if (product.variants.length === 0) return undefined; const pool = product.variants.some((v) => v.available) ? product.variants.filter((v) => v.available) : product.variants; return pool.reduce((a, b) => (b.price.amount < a.price.amount ? b : a)); } /** * Same as `findCheapestVariant` but typed non-optional so existing call sites keep compiling. * Adapters never emit a product without variants, so the throw is unreachable for adapter * output; hand-built products should use `findCheapestVariant`. */ export function cheapestVariant(product: Product): Variant { const v = findCheapestVariant(product); if (!v) throw new Error(`cheapestVariant: product "${product.handle}" has no variants (use findCheapestVariant)`); return v; } /** First variant whose options contain every given key/value. */ export function variantFor( product: Product, options: Record, ): Variant | undefined { return product.variants.find((v) => Object.entries(options).every(([k, val]) => v.options[k] === val), ); } export function optionValues(product: Product, name: string): string[] { return product.options.find((o) => o.name === name)?.values ?? []; } /** Images to show for a variant: its own image first, then the rest of the product. */ export function imagesFor(product: Product, variant?: Variant): ProductImage[] { if (!variant?.image) return product.images; const own = variant.image; return [own, ...product.images.filter((i) => i.src !== own.src)]; } export function formatMoney(money: Money, locale = "en-US"): string { const whole = Number.isInteger(money.amount); return new Intl.NumberFormat(locale, { style: "currency", currency: money.currency, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: 2, }).format(money.amount); } /** True when at least one variant can be bought somewhere. */ export function isBuyable(product: Product): boolean { return product.variants.some((v) => v.available && v.storeUrl); } 35:T594,import { SiteNav } from "./site-nav"; import { brandFixture } from "../../../lib/commerce/fixtures/heroes"; import { DemoStack, VariantFrame } from "../../ui/_kit/variant-frame"; import { ProductPicture } from "../../ui/_kit/product-picture"; // Only the first nav mounts the command menu: it listens for Cmd/Ctrl+K on the whole page. export function SiteNavDemo({ brand }: { brand?: string }) { const f = brandFixture(brand); const links = f.nav.map((n) => ({ label: n.label, href: n.href })); const base = { brand: f.brand, links, products: f.products, collections: f.collections, cartCount: 2, cartHref: "/cart" }; return (

); } export default SiteNavDemo; 36:T7f7,import type { BlockMeta } from "../../../lib/block-meta"; export const siteNavMeta: BlockMeta = { slug: "site-nav", title: "Site nav", description: "Brand, links, product search (Kobra command-menu), cart count, and a Kobra sheet menu on mobile. Minimal, centered, mega (navigation-menu with collection images), and sticky transparent-to-solid.", group: "landing", kobraDeps: ["button", "command-menu", "navigation-menu", "sheet"], files: [ "blocks/landing/site-nav/site-nav.tsx", "blocks/ui/wordmark/wordmark.tsx", "blocks/ui/cart-button/cart-button.tsx", "blocks/ui/_kit/product-picture.tsx", "blocks/ui/_kit/types.ts", "lib/commerce/select.ts", ], props: [ { name: "brand", type: "Brand", description: "Brand name for the wordmark." }, { name: "links", type: "NavLink[]", description: "Primary links; the first is the mega trigger." }, { name: "collections", type: "Collection[]", default: "[]", description: "Mega menu entries." }, { name: "products", type: "Product[]", default: "[]", description: "Search results and collection images." }, { name: "cartCount", type: "number", default: "0", description: "Cart badge count (prop only)." }, { name: "variant", type: "'minimal' | 'centered' | 'mega' | 'sticky'", default: "'minimal'", description: "Layout." }, { name: "search", type: "boolean", default: "true", description: "Show search and mount the command menu (one per page)." }, { name: "productHref", type: "(p: Product) => string", default: "/products/", description: "Search result links." }, { name: "collectionHref", type: "(handle: string) => string", default: "/collections/", description: "Mega menu and sheet collection links." }, { name: "homeHref", type: "string", default: "'/'", description: "Wordmark link." }, { name: "onNavigate", type: "(href: string) => void", default: "location.assign", description: "Search result navigation." }, ], tags: ["nav", "search", "cart", "landing"], 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":"/#landing","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Landing"}]}],["$","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":"Site nav"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Site nav"}],["$","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":"Brand, links, product search (Kobra command-menu), cart count, and a Kobra sheet menu on mobile. Minimal, centered, mega (navigation-menu with collection images), and sticky transparent-to-solid."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"site-nav","group":"landing","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/landing/site-nav/site-nav.tsx","code":"$30"},{"path":"blocks/ui/wordmark/wordmark.tsx","code":"$31"},{"path":"blocks/ui/cart-button/cart-button.tsx","code":"$32"},{"path":"blocks/ui/_kit/product-picture.tsx","code":"$33"},{"path":"blocks/ui/_kit/types.ts","code":"import type { Product } from \"../../../lib/commerce/types\";\n\n/** A call to action: label and where it goes. */\nexport type Cta = { label: string; href: string };\n\n/** A navigation link. `href: null` renders as plain text (no destination yet). */\nexport type NavLink = { label: string; href: string | null };\n\n/** Where a product tile links. Override with the `productHref` prop on any block. */\nexport const defaultProductHref = (p: Product) => `/products/${p.handle}`;\n\nexport type ProductHref = (product: Product) => string;\n"},{"path":"lib/commerce/select.ts","code":"$34"},{"path":"blocks/landing/site-nav/demo.tsx","code":"$35"},{"path":"blocks/landing/site-nav/meta.ts","code":"$36"}]}],"props":"$L37"}],"$L38"]}]