61: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"] 62: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"] 63:T2c9f,"use client" import * as React from "react" import { ArrowUpRight } from "lucide-react" import { MotionConfig, motion, useReducedMotion } from "motion/react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { cn } from "@/lib/utils" /* * A campaign photo you can shop: numbered hotspots on the image, each * opening the product it points at, and the same products listed under it. * * } * mobileImage={

} * hotspots={[{ id: "coat", x: 38, y: 42, mobile: { x: 52, y: 30 }, product }]} * /> * * Hotspots are hairline rings, not filled dots — they read as annotation. * Positions are percentages of the image, so they hold at any width; a * phone usually gets a different crop, so each hotspot can carry its own * `mobile` position for `mobileImage`. A hotspot opens on hover with a * pointer, and on tap or Enter otherwise; the card grows out of the * hotspot and folds back into it (Motion; a fade under reduced motion), * kept open until the fold has played. Hovering a product in the list * marks its hotspot. Your shadcn Popover does the positioning and focus. */ export interface LookbookProduct { name: string href: string /** Major units: 420 for $420. */ price: number /** Was-price; struck through when higher. */ compareAt?: number brand?: string /** Already rendered — a thumbnail for the card. */ image?: React.ReactNode } export interface LookbookHotspot { id: string /** Percent from the left of `image`, 0–100. */ x: number /** Percent from the top of `image`, 0–100. */ y: number /** Where it sits on `mobileImage`, whose crop differs. Defaults to x / y. */ mobile?: { x: number; y: number } product: LookbookProduct } /** 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 const subscribeNothing = () => () => {} export interface LookbookStripProps extends Omit, "title"> { /** Already rendered; it fills the strip. */ image: React.ReactNode /** A different crop for phones (below md). Give it `loading="lazy"` so only one loads. */ mobileImage?: React.ReactNode hotspots: LookbookHotspot[] title?: React.ReactNode /** The strip's shape from md up. Defaults to "16 / 7". */ aspectRatio?: string /** On a phone. Defaults to "4 / 5". */ mobileAspectRatio?: string currency?: string /** `undefined` follows the visitor's locale, once hydrated. */ locale?: string /** Lists the products under the image. Defaults to true. */ showList?: boolean } export function LookbookStrip({ image, mobileImage, hotspots, title, aspectRatio = "16 / 7", mobileAspectRatio = "4 / 5", currency = "USD", locale: localeProp, showList = true, className, ...props }: LookbookStripProps) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) const locale = localeProp ?? (hydrated ? undefined : "en-US") const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: "currency", currency }), [locale, currency]) const headingId = React.useId() const [marked, setMarked] = React.useState(null) return (

{title ? (

{title}

) : null}

img]:size-full [&>img]:object-cover", mobileImage && "max-md:hidden")}>{image}

{mobileImage ?

{mobileImage}

: null} {hotspots.map((spot, i) => ( ))}

{showList ? (

setMarked(spot.id)} onPointerLeave={() => setMarked(null)} onFocus={() => setMarked(spot.id)} onBlur={() => setMarked(null)} className="group flex items-baseline gap-3 px-4 py-3.5 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset" > {String(i + 1).padStart(2, "0")} {spot.product.name} {spot.product.brand ? {spot.product.brand} : null}

) : null}

) } function Price({ product, money }: { product: LookbookProduct; money: Intl.NumberFormat }) { const sale = product.compareAt !== undefined && product.compareAt > product.price return ( {money.format(product.price)} {sale ? ( ~~was {money.format(product.compareAt!)}~~ ) : null} ) } /** One ring on the photo, and the card it opens. */ function Hotspot({ spot, index, money, marked, }: { spot: LookbookHotspot index: number money: Intl.NumberFormat marked: boolean }) { const reduce = useReducedMotion() // `open` is what was asked for; `mounted` keeps the Popover open until // the fold back into the hotspot has played. const [open, setOpen] = React.useState(false) const [mounted, setMounted] = React.useState(false) if (open && !mounted) setMounted(true) const timer = React.useRef(0) React.useEffect(() => () => window.clearTimeout(timer.current), []) const show = () => { window.clearTimeout(timer.current) setOpen(true) } // A short grace, so the pointer can cross from the ring to the card. const hideSoon = () => { window.clearTimeout(timer.current) timer.current = window.setTimeout(() => setOpen(false), 160) } // Hover is for a mouse; touch and pens open it with a tap, through the Popover. const onPointerEnter = (event: React.PointerEvent) => { if (event.pointerType === "mouse") show() } const onPointerLeave = (event: React.PointerEvent) => { if (event.pointerType === "mouse") hideSoon() } const at = spot.mobile ?? spot const position = { "--hx": `${spot.x}%`, "--hy": `${spot.y}%`, "--mx": `${at.x}%`, "--my": `${at.y}%`, } as React.CSSProperties const sale = spot.product.compareAt !== undefined && spot.product.compareAt > spot.product.price return ( (next ? show() : setOpen(false))}> {/* The hairline ring, with the number it shares with the list. */} {index + 1} { if (!open) setMounted(false) }} // Grow from the side the hotspot is on: both bases set an origin variable. style={{ transformOrigin: "var(--radix-popover-content-transform-origin, var(--transform-origin, center bottom))" }} className="flex w-64 gap-3 border bg-popover p-3 text-popover-foreground shadow-lg" > {spot.product.image ? ( {spot.product.image} ) : null} {spot.product.brand ? ( {spot.product.brand} ) : null} {spot.product.name} View product ) } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["popover"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/lookbook-strip/lookbook-strip.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/lookbook-strip.tsx"}],"className":"h-[70svh] min-h-80"}]]}]