const [active, setActive] = React.useState(0)<SqueezeCarousel items={items} activeIndex={active} onActiveIndexChange={setActive}>  ...</SqueezeCarousel>// Anywhere else on the page:<button onClick={() => setActive(3)}>Jump to item 4</button>

<SqueezeCarousel items={items} imageHeight={50} borderRadius={16}>  ...</SqueezeCarousel>

import {  SqueezeCarousel,  SqueezeCarouselHeader,  SqueezeCarouselHeading,  SqueezeCarouselTitle,  SqueezeCarouselDescription,  SqueezeCarouselControls,  SqueezeCarouselPrevious,  SqueezeCarouselNext,  SqueezeCarouselCanvas,  SqueezeCarouselDetails,  SqueezeCarouselDetail,  SqueezeCarouselDetailCopy,  SqueezeCarouselDetailTitle,  SqueezeCarouselDetailDescription,  SqueezeCarouselDetailAction,  SqueezeCarouselActionIcon,  SqueezeCarouselMobileList,  SqueezeCarouselMobileItem,  SqueezeCarouselMobileMedia,  type SqueezeCarouselItem,} from "@/components/squeeze-carousel"// Keep the array reference stable (module scope or useMemo).const items = [  {    id: "annual-letter",    title: "Businesses on ABUI shipped 1.9 million components in 2025.",    description: "Our annual letter explores the trends defining the component economy.",    cta: "Read the letter",    href: "/annual-letter",    src: "/news/annual-letter.jpg",        // 16:9, e.g. 1632×918    mobileSrc: "/news/annual-letter-m.jpg", // 336:350, e.g. 672×700  },  // ... at least 5 items for a full strip] satisfies Array<SqueezeCarouselItem & { description: string; cta: string; href: string }>export function WhatsHappening() {  // Rendered once for the desktop details and once for the mobile cards.  const renderCopy = (item: (typeof items)[number]) => (    <>      <SqueezeCarouselDetailCopy>        <SqueezeCarouselDetailTitle>{item.title}</SqueezeCarouselDetailTitle>        <SqueezeCarouselDetailDescription>{item.description}</SqueezeCarouselDetailDescription>      </SqueezeCarouselDetailCopy>      <SqueezeCarouselDetailAction asChild>        <a href={item.href}>          {item.cta}          <SqueezeCarouselActionIcon />        </a>      </SqueezeCarouselDetailAction>    </>  )  return (    <SqueezeCarousel items={items}>      <SqueezeCarouselHeader>        <SqueezeCarouselHeading>          <SqueezeCarouselTitle>What's happening</SqueezeCarouselTitle>          <SqueezeCarouselDescription>See the latest from ABUI.</SqueezeCarouselDescription>        </SqueezeCarouselHeading>        <SqueezeCarouselControls>          <SqueezeCarouselPrevious />          <SqueezeCarouselNext />        </SqueezeCarouselControls>      </SqueezeCarouselHeader>      <SqueezeCarouselCanvas />      <SqueezeCarouselDetails>        {(item, index) => (          <SqueezeCarouselDetail index={index}>{renderCopy(item)}</SqueezeCarouselDetail>        )}      </SqueezeCarouselDetails>      <SqueezeCarouselMobileList>        {(item, index) => (          <SqueezeCarouselMobileItem index={index}>            <SqueezeCarouselMobileMedia />            {renderCopy(item)}          </SqueezeCarouselMobileItem>        )}      </SqueezeCarouselMobileList>    </SqueezeCarousel>  )}