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:T575e,"use client" import * as React from "react" import { Check, Star } from "lucide-react" import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" /* * The reviews section of a product page: the average, a star histogram that * filters the list, a fit scale, and the reviews themselves. * * * * or composed * * * * * * * Every histogram row is a button: it filters the list to that rating, and * says so in words. The fit scale has a text equivalent ("Runs a little * small") on screen, not only a marker. Motion does the moving: the active * row's rule slides between rows, the list grows and shrinks to its measured * height as it filters, and reviews fade in and out — a fade alone under * reduced motion. `useReviewSummary()` reads the shared state. */ export interface Review { id: string /** 1 to 5. */ rating: number title?: string body: React.ReactNode author: string /** ISO date, "2026-09-14". Shown as a calendar date, the same in every time zone. */ date: string /** Bought it: shown as a "Verified buyer" badge. */ verified?: boolean /** -1 runs small, 0 true to size, 1 runs large. */ fit?: number /** What they bought: "Tan · EU 41". */ variant?: string } /** Review counts per rating, 1 star first: `[4, 3, 18, 61, 226]`. */ export type ReviewDistribution = [number, number, number, number, number] /** 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 /** The words for a fit score, from -1 (small) to 1 (large). */ function defaultFitLabel(fit: number) { if (fit <= -0.6) return "Runs small" if (fit <= -0.2) return "Runs a little small" if (fit < 0.2) return "True to size" if (fit < 0.6) return "Runs a little large" return "Runs large" } const subscribeNothing = () => () => {} /** * The locale to format with. Yours when you pass one. Otherwise the * visitor's — but only once hydrated: the server cannot know it, and its HTML * ("Sep 21, 2026") must match the first client render, not the browser's * "21 Sept 2026". Until then, en-US. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /* ─── context ──────────────────────────────────────────────────────────── */ export interface ReviewSummaryContextValue { reviews: Review[] /** The reviews under the current filter. */ filtered: Review[] distribution: ReviewDistribution total: number /** 0 when there are no reviews. */ average: number /** Mean fit, -1 to 1; undefined when no review rated the fit. */ fit?: number fitCount: number fitLabel: (fit: number) => string /** The rating the list is filtered to, or null for all. */ rating: number | null setRating: (rating: number | null) => void /** How many of `filtered` are on show; "Show more" raises it. */ visible: number showMore: () => void /** The locale formatting uses: yours, or the visitor's once hydrated. */ locale?: string /** Formats a 0–5 score for the locale: "4.6". */ formatScore: (score: number) => string formatDate: (iso: string) => string loading: boolean } const ReviewSummaryContext = React.createContext(null) export function useReviewSummary() { const context = React.useContext(ReviewSummaryContext) if (!context) { throw new Error("useReviewSummary must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface ReviewSummaryProps extends Omit, "title"> { reviews: Review[] /** * Counts per rating across every review, when `reviews` is one page of * many. Defaults to counting `reviews`. */ distribution?: ReviewDistribution /** Defaults to the mean of `distribution`. */ average?: number /** Overall fit, -1 to 1. Defaults to the mean of the reviews' `fit`. */ fit?: number /** "Runs a little small" for a score — your words, or another language. */ fitLabel?: (fit: number) => string /** The rating to filter to, or null for all. */ rating?: number | null defaultRating?: number | null /** Fetch that rating's reviews here when they are paginated server-side. */ onRatingChange?: (rating: number | null) => void /** Reviews shown before "Show more". Defaults to 4. */ pageSize?: number title?: React.ReactNode /** Under the score: a "Write a review" link, say. */ action?: React.ReactNode locale?: string loading?: boolean } export function ReviewSummary({ reviews, distribution: distributionProp, average: averageProp, fit: fitProp, fitLabel = defaultFitLabel, rating: ratingProp, defaultRating = null, onRatingChange, pageSize = 4, title = "Reviews", action, locale: localeProp, loading = false, className, children, ...props }: ReviewSummaryProps) { const locale = useFormatLocale(localeProp) const [rating, setRatingState] = useControllableState(ratingProp, defaultRating, onRatingChange) const [visible, setVisible] = React.useState(pageSize) const headingId = React.useId() // A new filter starts from the first page again. const setRating = React.useCallback( (next: number | null) => { setVisible(pageSize) setRatingState(next) }, [pageSize, setRatingState] ) const context = React.useMemo(() => { const distribution = distributionProp ?? reviews.reduce( (counts, review) => { const star = Math.min(5, Math.max(1, Math.round(review.rating))) counts[star - 1] += 1 return counts }, [0, 0, 0, 0, 0] ) const total = distribution.reduce((sum, n) => sum + n, 0) const average = averageProp ?? (total ? distribution.reduce((sum, n, i) => sum + n * (i + 1), 0) / total : 0) const fits = reviews.map((r) => r.fit).filter((f): f is number => typeof f === "number") const fit = fitProp ?? (fits.length ? fits.reduce((a, b) => a + b, 0) / fits.length : undefined) const score = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) // UTC: "2026-09-14" is a calendar date, and must not become the 13th // west of Greenwich — or differ between the server and the browser. const date = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }) return { reviews, filtered: rating === null ? reviews : reviews.filter((r) => Math.round(r.rating) === rating), distribution, total, average, fit, fitCount: fits.length, fitLabel, rating, setRating, visible, showMore: () => setVisible((v) => v + pageSize), locale, formatScore: (n) => score.format(n), formatDate: (iso) => { const parsed = new Date(iso) return Number.isNaN(parsed.getTime()) ? iso : date.format(parsed) }, loading, } }, [reviews, distributionProp, averageProp, fitProp, fitLabel, rating, setRating, visible, pageSize, locale, loading]) return (

{title}

{children ?? (

{action}

)}

) } /* ─── parts ────────────────────────────────────────────────────────────── */ /** Five stars, filled to the score; partial stars are clipped, not rounded. */ function Stars({ score, className }: { score: number; className?: string }) { return ( {Array.from({ length: 5 }, (_, i) => ( ))} {Array.from({ length: 5 }, (_, i) => ( ))} ) } /** The average, large — the number is the headline — and what it is based on. */ export function ReviewSummaryScore({ className, ...props }: React.HTMLAttributes) { const { average, total, formatScore, locale, loading } = useReviewSummary() if (loading) { return (

) } const count = new Intl.NumberFormat(locale).format(total) return (

{total ? ( <>

{formatScore(average)} out of 5

{count} {total === 1 ? "review" : "reviews"}

) : ( <>

No reviews yet.

Bought one? Yours would be the first — and the one the next buyer reads.

)}

) } /** * One row per rating, 5 to 1. Each row is a button that filters the list * and reads out as "5 stars, 226 reviews, 72%". The active row carries a * rule that slides from row to row. */ export function ReviewSummaryHistogram({ className, ...props }: React.HTMLAttributes) { const { distribution, total, rating, setRating, locale, loading } = useReviewSummary() const reduce = useReducedMotion() const scope = React.useId() if (!total && !loading) return null const count = new Intl.NumberFormat(locale) const percent = new Intl.NumberFormat(locale, { style: "percent" }) return (

{[5, 4, 3, 2, 1].map((star) => { const n = distribution[star - 1] const share = total ? n / total : 0 const active = rating === star return ( ) })}

) } /** Which of the five steps, small to large, a fit score falls in — as the words do. */ function fitStep(fit: number) { if (fit <= -0.6) return 0 if (fit <= -0.2) return 1 if (fit < 0.2) return 2 if (fit < 0.6) return 3 return 4 } /** * How the fit runs, as reviewers reported it: five fixed steps from small to * large with the one it lands on filled, and the reading in words above. * A gauge, not a control — no handle to grab, nothing to drag. Screen * readers get it as a meter with the words as its value. */ export function ReviewSummaryFit({ className, ...props }: React.HTMLAttributes) { const { fit, fitCount, fitLabel, locale, loading } = useReviewSummary() const reduce = useReducedMotion() const scope = React.useId() if (fit === undefined || loading) return null const clamped = Math.min(1, Math.max(-1, fit)) const label = fitLabel(clamped) const step = fitStep(clamped) const ratings = `${new Intl.NumberFormat(locale).format(fitCount)} ${fitCount === 1 ? "rating" : "ratings"}` return (

Fit {label} · {ratings}

{[0, 1, 2, 3, 4].map((i) => ( {i === step ? ( ) : null} ))}

Small True to size Large

) } /** Follows its content's height, so the panel grows and shrinks rather than jumps. */ function useMeasuredHeight() { const ref = React.useRef(null) const [height, setHeight] = React.useState("auto") React.useLayoutEffect(() => { const node = ref.current if (!node) return const observer = new ResizeObserver(([entry]) => setHeight(entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight)) observer.observe(node) return () => observer.disconnect() }, []) return [ref, height] as const } /** * The reviews, filtered by the histogram. Filtering says what is showing and * offers the way back; the list grows to its new height with Motion. */ export function ReviewSummaryList({ className, ...props }: React.HTMLAttributes) { const { filtered, total, rating, setRating, visible, showMore, loading } = useReviewSummary() const reduce = useReducedMotion() const [inner, height] = useMeasuredHeight() const shown = filtered.slice(0, visible) if (!total && !loading) return null return (

{loading ? "Loading reviews…" : rating === null ? `Showing ${shown.length} of ${filtered.length}` : `${filtered.length} ${filtered.length === 1 ? "review" : "reviews"} with ${rating} ${rating === 1 ? "star" : "stars"}`}

{rating !== null ? ( ) : null}

{loading ? (

) : (

{shown.map((review) => ( ))}

)}

{!loading && shown.length < filtered.length ? ( ) : null}

) } /** One review: rating, title, body, then who and when — and whether they bought it. */ export function ReviewSummaryItem({ review, className, ...props }: { review: Review } & React.HTMLAttributes) { const { formatDate, formatScore } = useReviewSummary() return (

Rated {formatScore(review.rating)} out of 5 {review.variant ? {review.variant} : null}

{review.title ?

{review.title}

: null}

{review.body}

{review.author} {formatDate(review.date)} {review.verified ? ( Verified buyer ) : null}

) } 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":["button","badge"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/review-summary/review-summary.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/review-summary.tsx"}],"className":"h-[70svh] min-h-80"}]]}]