2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T15f4,"use client"; import { useEffect, useState, useSyncExternalStore } from "react"; import { IconX } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { Marquee } from "../marquee-strip/marquee"; import "../../ui/_kit/kit.css"; export type AnnouncementBarProps = { messages: string[]; variant?: "static" | "marquee" | "countdown"; /** ISO date the countdown runs to (countdown variant). */ endsAt?: string; /** Text before the countdown, e.g. "Next drop in". */ countdownLabel?: string; /** Shown when the countdown has finished. */ endedLabel?: string; /** Makes the whole message a link. */ href?: string; dismissible?: boolean; /** localStorage key remembering a dismissal. */ storageKey?: string; className?: string; }; function parts(ms: number) { const total = Math.max(0, Math.floor(ms / 1000)); return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60, }; } function readFlag(key: string) { try { return window.localStorage.getItem(key) === "1"; } catch { return false; } } function subscribe(cb: () => void) { window.addEventListener("storage", cb); return () => window.removeEventListener("storage", cb); } const two = (n: number) => String(n).padStart(2, "0"); function Countdown({ endsAt, label, endedLabel }: { endsAt: string; label?: string; endedLabel: string }) { const [left, setLeft] = useState(null); useEffect(() => { const end = new Date(endsAt).getTime(); const tick = () => setLeft(end - Date.now()); tick(); const id = window.setInterval(tick, 1000); return () => window.clearInterval(id); }, [endsAt]); if (left !== null && left <= 0) return {endedLabel}; const p = left === null ? null : parts(left); const cells: [string, string][] = [ ["days", p ? two(p.d) : "--"], ["hours", p ? two(p.h) : "--"], ["minutes", p ? two(p.m) : "--"], ["seconds", p ? two(p.s) : "--"], ]; return ( {label ? {label} : null} {cells.map(([unit, value], i) => ( {i > 0 ? : null} ))} ); } /** One-line bar above the nav: static message, marquee of several, or a drop countdown. Dismissal is remembered. */ export function AnnouncementBar({ messages, variant = "static", endsAt, countdownLabel, endedLabel = "Live now", href, dismissible = true, storageKey = "kc-announcement", className, }: AnnouncementBarProps) { const [dismissed, setDismissed] = useState(false); const [collapsed, setCollapsed] = useState(false); const remembered = useSyncExternalStore( subscribe, () => readFlag(storageKey), () => false, ); const gone = remembered || collapsed; const dismiss = () => { setDismissed(true); try { window.localStorage.setItem(storageKey, "1"); } catch { /* ignore */ } }; if (gone || messages.length === 0) return null; const Wrap = href ? "a" : "span"; const wrapProps = href ? { href } : {}; const first = messages[0]; let body; if (variant === "countdown" && endsAt) { body = ( {first} ); } else if (variant === "marquee" && messages.length > 0) { body = ( {messages.map((m) => ( {m} ))} ); } else { body = ( {first} ); } return (

{ if (dismissed && e.target === e.currentTarget) setCollapsed(true); }} >

{body} {dismissible ? ( ) : null}

); } export default AnnouncementBar; 32: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}

); } 33: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; } } 34:T52c,import { AnnouncementBar } from "./announcement-bar"; import { brandFixture } from "../../../lib/commerce/fixtures/heroes"; import { DemoStack, VariantFrame } from "../../ui/_kit/variant-frame"; // A countdown a few days out, fixed at module load so the demo always shows a live timer. const ENDS_AT = new Date(Date.now() + 3 * 86400_000 + 4 * 3600_000).toISOString(); export function AnnouncementBarDemo({ brand }: { brand?: string }) { const f = brandFixture(brand); const messages = f.manifesto.lines.length ? f.manifesto.lines.slice(0, 4) : [f.hero.eyebrow, f.brand.tagline]; const endsAt = ENDS_AT; return ( ); } export default AnnouncementBarDemo; 35:T5c6,import type { BlockMeta } from "../../../lib/block-meta"; export const announcementBarMeta: BlockMeta = { slug: "announcement-bar", title: "Announcement bar", description: "Ink bar (wraps to two lines on narrow screens, balanced, instead of truncating): static, marquee of several messages, or a tabular drop countdown. Dismissible, remembered in localStorage.", group: "landing", kobraDeps: ["button"], files: [ "blocks/landing/announcement-bar/announcement-bar.tsx", "blocks/landing/marquee-strip/marquee.tsx", "blocks/landing/marquee-strip/marquee.css", ], props: [ { name: "messages", type: "string[]", description: "One message, or several for the marquee." }, { name: "variant", type: "'static' | 'marquee' | 'countdown'", default: "'static'", description: "Layout." }, { name: "endsAt", type: "string (ISO)", description: "Countdown target." }, { name: "countdownLabel", type: "string", description: "Text before the timer." }, { name: "endedLabel", type: "string", default: "'Live now'", description: "Shown after the target." }, { name: "href", type: "string", description: "Makes messages a link." }, { name: "dismissible", type: "boolean", default: "true", description: "Show the dismiss button." }, { name: "storageKey", type: "string", default: "'kc-announcement'", description: "localStorage key for dismissal." }, ], tags: ["announcement", "countdown", "marquee", "landing"], status: "ready", }; 24:["$","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":["$","$L2d",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":["$","$L2d",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":"Announcement bar"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Announcement bar"}],["$","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":"Ink bar (wraps to two lines on narrow screens, balanced, instead of truncating): static, marquee of several messages, or a tabular drop countdown. Dismissible, remembered in localStorage."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"announcement-bar","group":"landing","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/landing/announcement-bar/announcement-bar.tsx","code":"$31"},{"path":"blocks/landing/marquee-strip/marquee.tsx","code":"$32"},{"path":"blocks/landing/marquee-strip/marquee.css","code":"$33"},{"path":"blocks/landing/announcement-bar/demo.tsx","code":"$34"},{"path":"blocks/landing/announcement-bar/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]