4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f:T1b2d,// Masonry from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; export interface MasonryColumns { base?: number; sm?: number; md?: number; lg?: number; xl?: number; } export interface MasonryProps extends React.ComponentProps<'div'> { /** Column count, fixed or per Tailwind breakpoint matched against the container's width. */ columns?: number | MasonryColumns; /** Gap in pixels, applied on both axes. */ gap?: number; } const roundRobin = (itemCount: number, columnCount: number) => { const next: number[][] = Array.from({ length: columnCount }, () => []); for (let i = 0; i < itemCount; i++) next[i % columnCount].push(i); return next; }; const sameAssignment = (a: number[][] | null, b: number[][]) => { if (!a || a.length !== b.length) return false; for (let c = 0; c < a.length; c++) { if (a[c].length !== b[c].length) return false; for (let i = 0; i < a[c].length; i++) { if (a[c][i] !== b[c][i]) return false; } } return true; }; const Masonry = ({ columns = { base: 1, sm: 2, lg: 3 }, gap = 16, className, style, children, ref, ...props }: MasonryProps) => { const base = typeof columns === 'number' ? columns : (columns.base ?? 1); const sm = typeof columns === 'number' ? null : (columns.sm ?? null); const md = typeof columns === 'number' ? null : (columns.md ?? null); const lg = typeof columns === 'number' ? null : (columns.lg ?? null); const xl = typeof columns === 'number' ? null : (columns.xl ?? null); const childArray = React.Children.toArray(children); const itemCount = childArray.length; const [columnCount, setColumnCount] = React.useState(() => Math.max(1, base)); const [assignment, setAssignment] = React.useState(null); const heightsRef = React.useRef(new Map()); const nodesRef = React.useRef(new Map()); const itemRefsRef = React.useRef(new Map void>()); const observerRef = React.useRef(null); const rafRef = React.useRef(0); const containerRef = React.useRef(null); const setContainerRef = React.useCallback( (node: HTMLDivElement | null) => { containerRef.current = node; if (typeof ref === 'function') ref(node); else if (ref) ref.current = node; }, [ref], ); // Layout effect so a client render settles on the measured column count before paint. React.useLayoutEffect(() => { const node = containerRef.current; if (!node) return; const resolve = (width: number) => { let count = base; if (width >= 640 && sm != null) count = sm; if (width >= 768 && md != null) count = md; if (width >= 1024 && lg != null) count = lg; if (width >= 1280 && xl != null) count = xl; return Math.max(1, count); }; setColumnCount(resolve(node.getBoundingClientRect().width)); const observer = new ResizeObserver(([entry]) => { if (entry) setColumnCount(resolve(entry.contentRect.width)); }); observer.observe(node); return () => observer.disconnect(); }, [base, sm, md, lg, xl]); React.useEffect(() => { const compute = () => { const heights = heightsRef.current; const totals = new Array(columnCount).fill(0); const next: number[][] = Array.from({ length: columnCount }, () => []); for (let i = 0; i < itemCount; i++) { let target = 0; for (let c = 1; c < columnCount; c++) { if (totals[c] < totals[target]) target = c; } next[target].push(i); totals[target] += (heights.get(i) ?? 0) + gap; } setAssignment((prev) => (sameAssignment(prev, next) ? prev : next)); }; const schedule = () => { cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(compute); }; const observer = new ResizeObserver((entries) => { let changed = false; for (const entry of entries) { const index = Number((entry.target as HTMLElement).dataset.masonryIndex); if (Number.isNaN(index)) continue; const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height; if (heightsRef.current.get(index) !== height) { heightsRef.current.set(index, height); changed = true; } } if (changed) schedule(); }); observerRef.current = observer; for (const node of nodesRef.current.values()) observer.observe(node); schedule(); return () => { cancelAnimationFrame(rafRef.current); observer.disconnect(); observerRef.current = null; }; }, [columnCount, gap, itemCount]); const getItemRef = (index: number) => { let callback = itemRefsRef.current.get(index); if (!callback) { callback = (node: HTMLDivElement | null) => { const prev = nodesRef.current.get(index); if (prev && observerRef.current) observerRef.current.unobserve(prev); if (node) { nodesRef.current.set(index, node); observerRef.current?.observe(node); } else { nodesRef.current.delete(index); heightsRef.current.delete(index); } }; itemRefsRef.current.set(index, callback); } return callback; }; const distribution = assignment && assignment.length === columnCount && assignment.reduce((n, col) => n + col.length, 0) === itemCount ? assignment : roundRobin(itemCount, columnCount); return (

{/* eslint-disable-next-line react-hooks/refs */} {distribution.map((columnIndices, column) => (

{columnIndices.map((index) => { const child = childArray[index]; const key = React.isValidElement(child) && child.key != null ? child.key : index; return (

{child}

); })}

))}

); }; const MasonryItem = ({ className, ...props }: React.ComponentProps<'div'>) => { return

; }; export { Masonry, MasonryItem }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/hirael/bases/radix/components/masonry.tsx","content":"$4f","type":"registry:component","target":"components/masonry.tsx"}],"className":"h-[70svh] min-h-80"}]]}]