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:Tb3e,import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { ProductPicture } from "../../ui/_kit/product-picture"; import { defaultProductHref, type ProductHref } from "../../ui/_kit/types"; import { Marquee, type MarqueeProps } from "./marquee"; export { Marquee } from "./marquee"; export type MarqueeItem = | { kind: "text"; label: string } | { kind: "product"; product: Product } | { kind: "node"; node: ReactNode }; export type MarqueeStripProps = Pick & { items: MarqueeItem[]; /** `ink` is a filled tape, `plain` sits on the canvas, `outline` is stroked type. */ tone?: "ink" | "plain" | "outline"; /** Text size. Display sizes use the brand face and CAPS token. */ size?: "micro" | "display-m" | "display-l"; productHref?: ProductHref; label?: string; className?: string; }; const TONE = { ink: "bg-ink text-canvas", plain: "border-y border-rule text-ink", outline: "border-y border-rule text-transparent [-webkit-text-stroke:1.5px_var(--kc-ink)]", } as const; const SIZE = { micro: "micro py-2.5", "display-m": "display-m py-3", "display-l": "display-l py-4", } as const; function Dot() { return ; } /** Generic marquee of text, product thumbs or custom nodes, separated by a dot. Reused by heroes and the announcement bar. */ export function MarqueeStrip({ items, tone = "ink", size = "micro", direction, speed, pauseOnHover, fill = 2, productHref = defaultProductHref, label, className, }: MarqueeStripProps) { if (items.length === 0) return null; const nodes = items.flatMap((item, i) => { const content = item.kind === "text" ? ( {item.label} ) : item.kind === "product" ? ( {item.product.title} ) : ( {item.node} ); return [content, ]; }); return ( {nodes} ); } export default MarqueeStrip; 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: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:T41a,import { MarqueeStrip } from "./marquee-strip"; import { brandFixture } from "../../../lib/commerce/fixtures/heroes"; import { DemoStack, VariantFrame } from "../../ui/_kit/variant-frame"; export function MarqueeStripDemo({ brand }: { brand?: string }) { const f = brandFixture(brand); return ( ({ kind: "text", label }))} /> ({ kind: "product", product }))} className="py-3" /> ); } export default MarqueeStripDemo; 35:T557,import type { BlockMeta } from "../../../lib/block-meta"; export const marqueeStripMeta: BlockMeta = { slug: "marquee-strip", title: "Marquee strip", description: "Generic CSS marquee of text, logos or product thumbs. Pauses on hover and focus, static under reduced motion. The Marquee primitive is exported for other blocks.", group: "landing", kobraDeps: [], files: [ "blocks/landing/marquee-strip/marquee-strip.tsx", "blocks/landing/marquee-strip/marquee.tsx", "blocks/landing/marquee-strip/marquee.css", "blocks/ui/_kit/product-picture.tsx", "blocks/ui/_kit/types.ts", ], props: [ { name: "items", type: "MarqueeItem[]", description: "{kind:'text'|'product'|'node'} entries." }, { name: "tone", type: "'ink' | 'plain' | 'outline'", default: "'ink'", description: "Filled tape, plain, or stroked type." }, { name: "size", type: "'micro' | 'display-m' | 'display-l'", default: "'micro'", description: "Type size." }, { name: "direction", type: "'forward' | 'reverse'", default: "'forward'", description: "Scroll direction." }, { name: "speed", type: "'slow' | 'normal' | 'fast'", default: "'normal'", description: "Loop duration." }, { name: "pauseOnHover", type: "boolean", default: "true", description: "Pause while hovered." }, ], tags: ["marquee", "ticker", "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":"Marquee strip"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Marquee strip"}],["$","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":"Generic CSS marquee of text, logos or product thumbs. Pauses on hover and focus, static under reduced motion. The Marquee primitive is exported for other blocks."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"marquee-strip","group":"landing","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/landing/marquee-strip/marquee-strip.tsx","code":"$30"},{"path":"blocks/landing/marquee-strip/marquee.tsx","code":"$31"},{"path":"blocks/landing/marquee-strip/marquee.css","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":"blocks/landing/marquee-strip/demo.tsx","code":"$34"},{"path":"blocks/landing/marquee-strip/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]