63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T224e,"use client" import * as React from "react" import { Pause, Play, X } from "lucide-react" import { AnimatePresence, MotionConfig, motion, useAnimate, useReducedMotion } from "motion/react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" /* * The thin bar above everything: free-shipping thresholds, sale windows, * drops. * * * * * An inverted ink bar, square, with a brand dot between messages. Static * shows the messages side by side (the first alone on a phone); the marquee * runs them past at 26s a loop — slow enough to read — and stops while the * pointer or focus is on it, and for good with its pause button (anything * that moves for more than five seconds needs one). Under reduced motion * the marquee doesn't run at all; it shows as the static bar. * * Dismissing folds it away (Motion) and is remembered per `version`, so it * stays gone across routes and visits and comes back only when the * announcement changes. The server can't read localStorage: a dismissed bar * renders and folds away on load unless you pass `dismissed` from a cookie. */ export interface Announcement { id: string content: React.ReactNode /** Makes the message a link. */ href?: string } /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const export interface AnnouncementBarProps extends React.HTMLAttributes { items: Announcement[] variant?: "static" | "marquee" /** Seconds for one loop of the marquee. Defaults to 26. */ speed?: number /** Shows the close button. Defaults to true. */ dismissible?: boolean /** Where the dismissal is remembered. Defaults to "ecomcn-announcement". */ storageKey?: string /** Change it and a dismissed bar comes back. Defaults to the items' ids. */ version?: string /** Dismissed already — from a cookie you read on the server — so it never renders. */ dismissed?: boolean onDismiss?: () => void /** The landmark's name. Defaults to "Announcements". */ label?: string } const listeners = new Set<() => void>() const subscribeStorage = (onChange: () => void) => { listeners.add(onChange) window.addEventListener("storage", onChange) return () => { listeners.delete(onChange) window.removeEventListener("storage", onChange) } } function readDismissed(key: string, version: string) { try { return localStorage.getItem(key) === version } catch { return false // storage blocked: it just won't be remembered } } export function AnnouncementBar({ items, variant = "static", speed = 26, dismissible = true, storageKey = "ecomcn-announcement", version: versionProp, dismissed: dismissedProp, onDismiss, label = "Announcements", className, ...props }: AnnouncementBarProps) { const reduce = useReducedMotion() const version = versionProp ?? items.map((item) => item.id).join("|") const stored = React.useSyncExternalStore( subscribeStorage, () => readDismissed(storageKey, version), () => false ) const hidden = dismissedProp ?? stored const dismiss = () => { try { localStorage.setItem(storageKey, version) } catch { /* private mode — dismissed for this page only */ } listeners.forEach((notify) => notify()) onDismiss?.() } if (items.length === 0) return null const marquee = variant === "marquee" && !reduce return ( {hidden ? null : ( )} >

{marquee ? : } {dismissible ? ( ) : null} )} ) } /** The separator: a dot in your brand colour, ink-light when you have none. */ function Dot() { return } function Message({ item }: { item: Announcement }) { return item.href ? ( {item.content} ) : ( {item.content} ) } /** Side by side, centred; on a phone, the first message alone. */ function StaticMessages({ items }: { items: Announcement[] }) { return (

0 && "max-sm:hidden")}> {i > 0 ? : null}

) } /** * Two copies of the messages, end to end, moved left by one copy's width * and repeated — seamless. The second copy is hidden from screen readers. */ function Marquee({ items, speed, besideClose }: { items: Announcement[]; speed: number; besideClose: boolean }) { const [scope, animate] = useAnimate() const controls = React.useRef | null>(null) const [paused, setPaused] = React.useState(false) const holds = React.useRef(0) React.useEffect(() => { controls.current = animate(scope.current, { x: ["0%", "-50%"] }, { duration: speed, ease: "linear", repeat: Infinity }) return () => controls.current?.stop() }, [animate, scope, speed]) React.useEffect(() => { if (paused) controls.current?.pause() else if (holds.current === 0) controls.current?.play() }, [paused]) // Hover and focus hold it still while they last; the button holds it for good. const hold = () => { holds.current += 1 controls.current?.pause() } const release = () => { holds.current = Math.max(0, holds.current - 1) if (holds.current === 0 && !paused) controls.current?.play() } const copy = (hiddenCopy: boolean) => (

{hiddenCopy ? {item.content} : }

) return ( <>

{copy(false)} {copy(true)}

) } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["button"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"src/registry/ecomcn/announcement-bar/announcement-bar.tsx","content":"$65","type":"registry:component","target":"components/ecomcn/announcement-bar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]