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:Tdbc,import { cn } from "@/lib/utils"; import type { Brand, Product } from "../../../lib/commerce/types"; import { CtaButton } from "../../ui/cta/cta"; import { Eyebrow } from "../../ui/eyebrow/eyebrow"; import { HeroTile } from "../../ui/_kit/hero-tile"; import { RISE } from "../../ui/_kit/hero"; import type { Cta, ProductHref } from "../../ui/_kit/types"; import { Marquee } from "../../landing/marquee-strip/marquee"; import "../../ui/_kit/kit.css"; export type HeroMarqueeProps = { brand: Brand; /** The huge scrolling line. Also the only h1 (read once by assistive tech). */ headline: string; eyebrow?: string; sub?: string; cta?: Cta; /** Product strip beneath the marquee. */ products?: Product[]; variant?: "single-line" | "double-line-opposite"; productHref?: ProductHref; className?: string; }; function Line({ text, outlined }: { text: string; outlined: boolean }) { return ( {text} ); } function Star() { return ( ); } /** A display line the width of the world: filled and outlined alternating, with a product strip beneath. */ export function HeroMarquee({ headline, eyebrow, sub, cta, products = [], variant = "double-line-opposite", productHref, className, }: HeroMarqueeProps) { const double = variant === "double-line-opposite"; return (

{headline}

{eyebrow ? {eyebrow} : } {sub ?

{sub}

: null}

{cta ? (

{cta.label}

) : null} {products.length > 0 ? (

) : null}

); } export default HeroMarquee; 31:T7e7,import { Children, Fragment, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import "./marquee.css"; export type MarqueeProps = { children: ReactNode; direction?: "forward" | "reverse"; /** Full loop duration. */ speed?: "slow" | "normal" | "fast"; /** Pause while hovered. Always pauses on keyboard focus inside. */ pauseOnHover?: boolean; /** Repeat the children this many times inside one copy; raise it when the content is short. */ fill?: number; /** Tailwind gap class between items, also the trailing space so the seam matches. */ gap?: "gap-4" | "gap-6" | "gap-8" | "gap-12"; className?: string; /** Applied to the visible region as an accessible name. */ label?: string; }; const DURATION = { slow: "[--kc-marquee-duration:70s]", normal: "[--kc-marquee-duration:40s]", fast: "[--kc-marquee-duration:22s]", } as const; const TRAIL = { "gap-4": "pe-4", "gap-6": "pe-6", "gap-8": "pe-8", "gap-12": "pe-12" } as const; /** * Scrolling marquee primitive (exported for other blocks). CSS-only motion: transform on one * track, pauses on hover, static under motion-reduce. The second copy is aria-hidden. */ export function Marquee({ children, direction = "forward", speed = "normal", pauseOnHover = true, fill = 1, gap = "gap-8", className, label, }: MarqueeProps) { const items = Children.toArray(children); const copy = Array.from({ length: Math.max(1, fill) }, (_, i) => {items}); const copyClass = cn("kc-marquee-copy flex shrink-0 items-center", gap, TRAIL[gap]); return (

{copy}

); } 32:T4c0,/* * Marquee primitive. Two copies of the content sit in one track that slides by half its width, * so the loop is seamless. Pauses on hover and focus (hover-capable pointers only). * Under prefers-reduced-motion it is static: one copy, scrollable, nothing cut off. */ @keyframes kc-marquee { to { transform: translateX(-50%); } } @keyframes kc-marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } .kc-marquee { overflow: hidden; } .kc-marquee-track { display: flex; width: max-content; animation: kc-marquee var(--kc-marquee-duration, 40s) linear infinite; will-change: transform; } .kc-marquee[data-direction="reverse"] .kc-marquee-track { animation-name: kc-marquee-reverse; } .kc-marquee:focus-within .kc-marquee-track { animation-play-state: paused; } @media (hover: hover) { .kc-marquee[data-pause="true"]:hover .kc-marquee-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .kc-marquee { overflow-x: auto; scrollbar-width: none; } .kc-marquee-track { animation: none; will-change: auto; } .kc-marquee-copy[aria-hidden="true"] { display: none; } } 33:T630,"use client"; import type { ReactNode } from "react"; import { IconArrowRight } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type Common = { href: string; children: ReactNode; className?: string; onClick?: () => void; }; /** * The one primary call to action: a Kobra Button rendered as a link. * `size="hero"` is a 44px hit area for the big moments; otherwise Kobra's own sizes apply. */ export function CtaButton({ href, children, className, onClick, variant = "default", size = "hero", }: Common & { variant?: "default" | "outline" | "secondary"; size?: "hero" | "default" | "lg"; }) { return ( ); } /** The quiet second action: an underlined text link with a trailing arrow. */ export function CtaLink({ href, children, className, onClick }: Common) { 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:T730,import type { Product } from "../../../lib/commerce/types"; import { Price } from "../price/price"; import { ProductPicture } from "./product-picture"; import { defaultProductHref, type ProductHref } from "./types"; import { cn } from "@/lib/utils"; export type HeroTileProps = { product: Product; href?: ProductHref; /** Caption overlay at the bottom start: line/title and price. */ caption?: boolean; sizes?: string; priority?: boolean; className?: string; }; /** Product image well with a hairline, quiet caption, and a gentle hover zoom. Links to the product. */ export function HeroTile({ product, href = defaultProductHref, caption = true, sizes, priority, className, }: HeroTileProps) { return ( {caption ? ( {product.title} ) : null} ); } 36: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}

); } 37:T5ef,/* * Shared motion for the heroes and landing blocks. Plain CSS because it owns keyframes. * Everything here answers prefers-reduced-motion. Easing and durations are the Kobra house numbers. */ /* Entrance: opacity + 8px rise, 220ms --ease-out, staggered 80ms by --kc-i, delay capped at 600ms. */ @keyframes kc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .kc-rise { animation: kc-rise 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both; animation-delay: min(calc(var(--kc-i, 0) * 80ms), 600ms); } /* Retro blinking caret (lonelyboi window). */ @keyframes kc-blink { 50% { opacity: 0; } } .kc-caret { animation: kc-blink 1.1s steps(1) infinite; } /* Hotspot ping ring (lookbook). */ @keyframes kc-ping { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } } .kc-ping { animation: kc-ping 1.8s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) infinite; } @media (prefers-reduced-motion: reduce) { .kc-rise, .kc-caret, .kc-ping { animation: none; } } /* Typing indicator dots (chat-feed). */ @keyframes kc-typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .kc-typing-dot { animation: kc-typing 1.1s var(--ease-out, ease-out) infinite; } @media (prefers-reduced-motion: reduce) { .kc-typing-dot { animation: none; opacity: 0.6; } } 38:T621,import type { BlockMeta } from "../../../lib/block-meta"; export const heroMarqueeMeta: BlockMeta = { slug: "hero-marquee", title: "Hero: marquee type", description: "A huge display line scrolling as a marquee, filled and outlined alternating, with a product strip beneath. Pauses on hover, static under reduced motion.", group: "heroes", kobraDeps: ["button"], files: [ "blocks/heroes/hero-marquee/hero-marquee.tsx", "blocks/landing/marquee-strip/marquee.tsx", "blocks/landing/marquee-strip/marquee.css", "blocks/ui/cta/cta.tsx", "blocks/ui/eyebrow/eyebrow.tsx", "blocks/ui/price/price.tsx", "blocks/ui/_kit/hero-tile.tsx", "blocks/ui/_kit/product-picture.tsx", "blocks/ui/_kit/hero.ts", "blocks/ui/_kit/types.ts", "blocks/ui/_kit/kit.css", ], props: [ { name: "brand", type: "Brand", description: "Brand (type follows its tokens)." }, { name: "headline", type: "string", description: "The scrolling line; rendered once as sr-only h1." }, { name: "eyebrow", type: "string", description: "Mono label." }, { name: "sub", type: "string", description: "Supporting sentence." }, { name: "cta", type: "Cta", description: "Primary button." }, { name: "products", type: "Product[]", default: "[]", description: "Up to four tiles in the strip." }, { name: "variant", type: "'single-line' | 'double-line-opposite'", default: "'double-line-opposite'", description: "One line or two scrolling opposite ways." }, ], tags: ["hero", "marquee", "type", "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":"/#heroes","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Heroes"}]}],["$","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":"Hero: marquee type"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Hero: marquee type"}],["$","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 huge display line scrolling as a marquee, filled and outlined alternating, with a product strip beneath. Pauses on hover, static under reduced motion."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"hero-marquee","group":"heroes","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/heroes/hero-marquee/hero-marquee.tsx","code":"$30"},{"path":"blocks/landing/marquee-strip/marquee.tsx","code":"$31"},{"path":"blocks/landing/marquee-strip/marquee.css","code":"$32"},{"path":"blocks/ui/cta/cta.tsx","code":"$33"},{"path":"blocks/ui/eyebrow/eyebrow.tsx","code":"import type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Small mono label that sits above a headline. */\nexport function Eyebrow({\n children,\n className,\n as: Tag = \"p\",\n}: {\n children: ReactNode;\n className?: string;\n as?: \"p\" | \"span\" | \"div\";\n}) {\n return {children};\n}\n\nexport default Eyebrow;\n"},{"path":"blocks/ui/price/price.tsx","code":"$34"},{"path":"blocks/ui/_kit/hero-tile.tsx","code":"$35"},{"path":"blocks/ui/_kit/product-picture.tsx","code":"$36"},{"path":"blocks/ui/_kit/hero.ts","code":"import type { Brand } from \"../../../lib/commerce/types\";\n\n/** Stagger steps for the one-time entrance (80ms apart, capped at 600ms in kit.css). Full class names on purpose. */\nexport const RISE = [\n \"kc-rise [--kc-i:0]\",\n \"kc-rise [--kc-i:1]\",\n \"kc-rise [--kc-i:2]\",\n \"kc-rise [--kc-i:3]\",\n \"kc-rise [--kc-i:4]\",\n \"kc-rise [--kc-i:5]\",\n \"kc-rise [--kc-i:6]\",\n] as const;\n\n/**\n * display-xl for short headlines, display-l when the line is long enough that display-xl would\n * run past three lines. Condensed CAPS faces (nopermission) carry roughly twice the characters.\n */\nexport function headlineScale(\n headline: string,\n brand: Pick,\n /** Set when the headline shares the row with an image (half width): always display-l. */\n half = false,\n): \"display-xl\" | \"display-l\" {\n if (half) return \"display-l\";\n const limit = brand.voice.caps ? 40 : 22;\n return headline.length > limit ? \"display-l\" : \"display-xl\";\n}\n"},{"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":"blocks/ui/_kit/kit.css","code":"$37"},{"path":"blocks/heroes/hero-marquee/demo.tsx","code":"import { HeroMarquee } from \"./hero-marquee\";\nimport { brandFixture, featuredProducts } from \"../../../lib/commerce/fixtures/heroes\";\nimport { DemoStack, VariantFrame } from \"../../ui/_kit/variant-frame\";\n\nexport function HeroMarqueeDemo({ brand }: { brand?: string }) {\n const f = brandFixture(brand);\n const base = {\n brand: f.brand,\n headline: f.hero.headline,\n eyebrow: f.hero.eyebrow,\n sub: f.hero.sub,\n cta: f.hero.cta,\n products: featuredProducts(f, 4),\n };\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default HeroMarqueeDemo;\n"},{"path":"blocks/heroes/hero-marquee/meta.ts","code":"$38"}]}],"props":"$L39"}],"$L3a"]}]