36:T17189,
"use client"

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react"

import { project, spring, velocityOf } from "@/lib/spring"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

// ponytail: css scroll-snap instead of embla; swap in embla when you need loop or autoplay.
// Touch gets native scroll physics. Mouse gets a 1:1 drag, momentum projection and a spring snap.

type Orientation = "horizontal" | "vertical"

type CarouselContextProps = {
  viewportRef: React.RefObject<HTMLDivElement | null>
  orientation: Orientation
  onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void
  dragged: React.RefObject<boolean>
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
}

const CarouselContext = createContext<CarouselContextProps | null>(null)

const useCarousel = () => {
  const context = useContext(CarouselContext)
  if (!context)
    throw new Error("useCarousel must be used within a <Carousel />")
  return context
}

const Carousel = ({
  orientation = "horizontal",
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & { orientation?: Orientation }) => {
  const viewportRef = useRef<HTMLDivElement>(null)
  const [canScrollPrev, setCanScrollPrev] = useState(false)
  const [canScrollNext, setCanScrollNext] = useState(false)
  const horizontal = orientation === "horizontal"

  const update = useCallback(() => {
    const el = viewportRef.current
    if (!el) return
    const pos = horizontal ? el.scrollLeft : el.scrollTop
    const max = horizontal
      ? el.scrollWidth - el.clientWidth
      : el.scrollHeight - el.clientHeight
    setCanScrollPrev(pos > 1)
    setCanScrollNext(pos < max - 1)
  }, [horizontal])

  useEffect(() => {
    const el = viewportRef.current
    if (!el) return
    update()
    el.addEventListener("scroll", update, { passive: true })
    const observer = new ResizeObserver(update)
    observer.observe(el)
    return () => {
      el.removeEventListener("scroll", update)
      observer.disconnect()
    }
  }, [update])

  const stop = useRef<() => void>(() => {})
  const dragged = useRef(false)

  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
    const el = viewportRef.current
    if (!el || e.pointerType !== "mouse" || e.button !== 0) return
    e.preventDefault()
    stop.current()
    const read = () => (horizontal ? el.scrollLeft : el.scrollTop)
    const write = (v: number) =>
      horizontal ? (el.scrollLeft = v) : (el.scrollTop = v)
    const point = (ev: PointerEvent | React.PointerEvent) =>
      horizontal ? ev.clientX : ev.clientY
    const start = read()
    const origin = point(e)
    const samples = [{ p: origin, t: e.timeStamp }]
    dragged.current = false
    el.setPointerCapture(e.pointerId)
    el.style.scrollSnapType = "none"
    el.style.scrollBehavior = "auto"
    el.dataset.dragging = ""

    const onMove = (ev: PointerEvent) => {
      const delta = point(ev) - origin
      if (Math.abs(delta) > 4) dragged.current = true
      write(start - delta)
      samples.push({ p: point(ev), t: ev.timeStamp })
      if (samples.length > 5) samples.shift()
    }

    const onUp = () => {
      el.removeEventListener("pointermove", onMove)
      el.removeEventListener("pointerup", onUp)
      el.removeEventListener("pointercancel", onUp)
      delete el.dataset.dragging
      const velocity = -velocityOf(samples)
      const rect = el.getBoundingClientRect()
      const max = horizontal
        ? el.scrollWidth - el.clientWidth
        : el.scrollHeight - el.clientHeight
      const stops = Array.from(el.firstElementChild?.children ?? [], (c) => {
        const r = c.getBoundingClientRect()
        return Math.min(
          max,
          Math.max(
            0,
            (horizontal ? r.left - rect.left : r.top - rect.top) + read()
          )
        )
      })
      const projected = read() + project(velocity)
      const target = stops.reduce(
        (best, s) =>
          Math.abs(s - projected) < Math.abs(best - projected) ? s : best,
        stops[0] ?? 0
      )
      stop.current = spring(read(), target, write, {
        damping: 1,
        response: 0.4,
        velocity,
      })
      el.style.scrollSnapType = ""
      el.style.scrollBehavior = ""
    }

    el.addEventListener("pointermove", onMove)
    el.addEventListener("pointerup", onUp)
    el.addEventListener("pointercancel", onUp)
  }

  const scrollBy = (dir: 1 | -1) => {
    stop.current()
    const el = viewportRef.current
    if (!el) return
    const item = el.firstElementChild?.firstElementChild as HTMLElement | null
    const step = item
      ? horizontal
        ? item.offsetWidth
        : item.offsetHeight
      : horizontal
        ? el.clientWidth
        : el.clientHeight
    el.scrollBy(horizontal ? { left: dir * step } : { top: dir * step })
  }

  return (
    <CarouselContext
      value={{
        viewportRef,
        orientation,
        onPointerDown,
        dragged,
        scrollPrev: () => scrollBy(-1),
        scrollNext: () => scrollBy(1),
        canScrollPrev,
        canScrollNext,
      }}
    >
      <div
        role="region"
        aria-roledescription="carousel"
        data-slot="carousel"
        onKeyDownCapture={(e) => {
          if (e.key === "ArrowLeft" || e.key === "ArrowUp") scrollBy(-1)
          if (e.key === "ArrowRight" || e.key === "ArrowDown") scrollBy(1)
        }}
        className={cn("relative", className)}
        {...props}
      >
        {children}
      </div>
    </CarouselContext>
  )
}

const CarouselContent = ({
  className,
  ...props
}: React.ComponentProps<"div">) => {
  const { viewportRef, orientation, onPointerDown, dragged } = useCarousel()
  return (
    <div
      ref={viewportRef}
      data-slot="carousel-content"
      onPointerDown={onPointerDown}
      onClickCapture={(e) => {
        if (!dragged.current) return
        e.preventDefault()
        e.stopPropagation()
      }}
      className={cn(
        "cursor-grab snap-mandatory [scrollbar-width:none] scroll-smooth select-none data-dragging:cursor-grabbing",
        orientation === "horizontal"
          ? "snap-x overflow-x-auto"
          : "snap-y overflow-y-auto"
      )}
    >
      <div
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-16" : "-mt-16 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
}

const CarouselItem = ({ className, ...props }: React.ComponentProps<"div">) => {
  const { orientation } = useCarousel()
  return (
    <div
      role="group"
      aria-roledescription="slide"
      data-slot="carousel-item"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full snap-start",
        orientation === "horizontal" ? "pl-16" : "pt-16",
        className
      )}
      {...props}
    />
  )
}

const Chevron = ({ flip }: { flip?: boolean }) => (
  <svg
    viewBox="0 0 16 16"
    fill="none"
    className={cn("size-16", flip && "rotate-180")}
    aria-hidden="true"
  >
    <path
      d="M10 3L5 8l5 5"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
)

const CarouselPrevious = ({
  className,
  variant = "outline",
  size = "icon",
  ...props
}: React.ComponentProps<typeof Button>) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
  return (
    <Button
      data-slot="carousel-previous"
      variant={variant}
      size={size}
      className={cn(
        "absolute bg-background-primary",
        orientation === "horizontal"
          ? "top-1/2 -left-48 -translate-y-1/2"
          : "-top-48 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <Chevron />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
}

const CarouselNext = ({
  className,
  variant = "outline",
  size = "icon",
  ...props
}: React.ComponentProps<typeof Button>) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()
  return (
    <Button
      data-slot="carousel-next"
      variant={variant}
      size={size}
      className={cn(
        "absolute bg-background-primary",
        orientation === "horizontal"
          ? "top-1/2 -right-48 -translate-y-1/2"
          : "-bottom-48 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <Chevron flip />
      <span className="sr-only">Next slide</span>
    </Button>
  )
}

export {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  useCarousel,
}
35:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$36"}}],"$L37"]}]
Installation

Usage
