4f: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"] 50:Tb90,"use client"; import { useMemo } from "react"; import { cn } from "@/lib/utils"; import { InfiniteLoader } from "./parts/infinite-loader"; import { MagazineTower } from "./parts/magazine-tower"; import { DEFAULT_GRID_LABELS, type MagazineLayoutProps, } from "./types"; /** * MagazineLayout — slot-based magazine layout. Composes the news-domain * components (page-hero / filter-bar / news-cards / category-cloud / * newsletter-signup) at the consumer level via slots; the layout itself * imports none of them at runtime. * * Generic over `T` — the item shape. Pair with `useMagazineFilter` for * filter + page state, or drive `displayedItems` / `featuredItem` / * `hasMore` / `isLoading` / `onLoadMore` directly. */ export function MagazineLayout(props: MagazineLayoutProps) { const { displayedItems, featuredItem, hasMore = false, isLoading = false, onLoadMore, renderItem, renderFeatured, hero, filterBar, sidebar, emptyState, labels: labelsProp, className, mainClassName, sidebarClassName, } = props; const labels = useMemo( () => ({ ...DEFAULT_GRID_LABELS, ...labelsProp }), [labelsProp], ); const hasContent = displayedItems.length > 0 || featuredItem !== undefined; const isEmpty = !hasContent && !isLoading; const showSidebar = sidebar !== undefined; return (

{hero ?

{hero}

: null} {filterBar ?

{filterBar}

: null} {isEmpty ? (

{emptyState ?? (

{labels.emptyStateText}

)}

) : (

{featuredItem !== undefined ? (

{renderFeatured ? renderFeatured(featuredItem) : renderItem({ item: featuredItem, slot: "large", index: 0 })}

) : null}

{showSidebar ? ( ) : null}

)}

); } export default MagazineLayout; 51:Td06,import type { ReactNode } from "react"; /** * Slot identifier passed to `renderItem`. The layout always renders one * or more `medium` slots; `large` is the lead slot in the main column * when there are enough items. */ export type MagazineLayoutItemSlot = "large" | "medium"; export interface MagazineLayoutLabels { /** Visually-hidden loader announcement. Default: 'Loading more items…'. */ loadingLabel?: string; /** Terminal end-of-list text. Default: 'All items shown'. */ endOfListText?: string; /** Default empty-state body when `emptyState` slot is not provided. Default: 'No items to show.'. */ emptyStateText?: string; } export interface MagazineLayoutProps { /** Current page of items (filtered + paged by the consumer or `useMagazineFilter`). */ displayedItems: T[]; /** Optional featured item rendered above the main column (whenever provided). */ featuredItem?: T; /** Whether more items are available beyond the current page. */ hasMore?: boolean; /** Whether `onLoadMore` is currently fetching. */ isLoading?: boolean; /** Callback fired when the loader sentinel enters the viewport. */ onLoadMore?: () => void; /** * How to render one item in a given slot. Receives the slot identifier * plus the item's `index` in the displayed list. Featured-item call site * passes `index: 0`. Required. * * v0.2 cutover from positional `(item, slot)`. The deprecated positional * shape was kept as `renderItemArgs` during the v0.1.x transition and is * now removed; the canonical name `renderItem` carries the object shape. */ renderItem: (args: { item: T; slot: MagazineLayoutItemSlot; index: number; }) => ReactNode; /** How to render the featured item. Defaults to `renderItem(featuredItem, 'large')`. */ renderFeatured?: (item: T) => ReactNode; /** Optional hero band rendered full-width above the filter bar. */ hero?: ReactNode; /** Optional filter bar rendered above the grid. */ filterBar?: ReactNode; /** Optional sidebar rendered to the right (col-span-4) of the main column. */ sidebar?: ReactNode; /** Optional empty-state node. Rendered when displayedItems is empty AND not loading. */ emptyState?: ReactNode; labels?: MagazineLayoutLabels; className?: string; mainClassName?: string; sidebarClassName?: string; } export const DEFAULT_GRID_LABELS: Required = { loadingLabel: "Loading more items…", endOfListText: "All items shown", emptyStateText: "No items to show.", }; export interface UseMagazineFilterArgs { /** Source items (consumer's full dataset). */ items: T[]; /** Per-page size. Default: 6. */ pageSize?: number; /** Predicate to derive the featured item (returns true for the one to feature). */ isFeatured?: (item: T) => boolean; /** Filter / search predicate. Default: include everything. */ filterPredicate?: (item: T) => boolean; /** Sort comparator. Default: no sort. */ sortComparator?: (a: T, b: T) => number; /** Artificial loading delay in ms (for demos). Default: 0. */ simulatedLoadingMs?: number; } export interface UseMagazineFilterReturn { displayedItems: T[]; featuredItem: T | undefined; hasMore: boolean; isLoading: boolean; filteredCount: number; loadMore: () => void; reset: () => void; } 52:T59d,import type { ReactNode } from "react"; import type { MagazineLayoutItemSlot } from "../types"; /** * The main column's "tower" of cards: 1 large card on top, 2-up medium row, * then a 3-up grid of remaining medium cards. The descending-density * pattern is the magazine intuition baked in. * * If there are 1 or 2 items, the layout adapts: one item = just the large; * two items = large + a single medium row. */ export function MagazineTower({ items, renderItem, }: { items: T[]; /** Same object-shape signature as the parent component's `renderItem` prop. */ renderItem: (args: { item: T; slot: MagazineLayoutItemSlot; index: number }) => ReactNode; }) { if (items.length === 0) return null; const lead = items[0]; const twoUp = items.slice(1, 3); const rest = items.slice(3); return (

{renderItem({ item: lead, slot: "large", index: 0 })} {twoUp.length > 0 ? (

{twoUp.map((item, i) => (

{renderItem({ item, slot: "medium", index: i + 1 })}

))}

) : null} {rest.length > 0 ? (

{rest.map((item, i) => (

{renderItem({ item, slot: "medium", index: i + 3 })}

))}

) : null}

); } 53:T737,"use client"; import { useRef } from "react"; import { cn } from "@/lib/utils"; import { useInfiniteScroll } from "../hooks/use-infinite-scroll"; import type { MagazineLayoutLabels } from "../types"; /** * Loader region. Holds the IntersectionObserver sentinel + visible status: * * - Loading → 3 bouncing dots (visually) + visually-hidden text label in * an `aria-live="polite"` region. * - End-of-list (no more items, but at least one rendered) → muted text * announcing completion. * - Otherwise → invisible sentinel only. */ export function InfiniteLoader({ hasMore, isLoading, onLoadMore, hasItems, labels, }: { hasMore: boolean; isLoading: boolean; onLoadMore: (() => void) | undefined; hasItems: boolean; labels: Required; }) { const sentinelRef = useRef(null); useInfiniteScroll({ ref: sentinelRef, hasMore, isLoading, onLoadMore, }); const showEndOfList = !hasMore && hasItems && !isLoading; return (

{isLoading ? (

{labels.loadingLabel} {[0, 1, 2].map((i) => (

) : null} {showEndOfList ? (

{labels.endOfListText}

) : null}

); } 54:Tebc,"use client"; import { useCallback, useMemo, useState } from "react"; import type { UseMagazineFilterArgs, UseMagazineFilterReturn, } from "../types"; /** * Companion hook for the simple consumer who wants filter + sort + paging * + loading state without writing it from scratch. Sophisticated consumers * skip this and drive the layout's props directly. * * Reset semantics: any change to `items`, `filterPredicate`, or * `sortComparator` reference resets the page back to 1. */ export function useMagazineFilter({ items, pageSize = 6, isFeatured, filterPredicate, sortComparator, simulatedLoadingMs = 0, }: UseMagazineFilterArgs): UseMagazineFilterReturn { const [page, setPage] = useState(1); const [isLoading, setIsLoading] = useState(false); // Documented reset semantics — any change to items/filterPredicate/ // sortComparator reference snaps page back to 1. Consumers MUST memoize // these references (or accept the reset cost) — that contract is part of // the hook's API surface. // // Implemented via React's "adjust state during render" pattern (NOT an // effect): track the prior dep refs in state; if any have changed, snap // page to 1 in the same pass. React batches the setStates and reruns // immediately — no extra commit. This avoids react-hooks/set-state-in-effect // (the React Compiler rejects setPage(1) inside a useEffect). // useState wraps function values with `() => fn` to bypass useState's // lazy-initializer treatment + updater-fn treatment for function-typed state. const [prevItems, setPrevItems] = useState(items); const [prevFilterPredicate, setPrevFilterPredicate] = useState< typeof filterPredicate >(() => filterPredicate); const [prevSortComparator, setPrevSortComparator] = useState< typeof sortComparator >(() => sortComparator); if ( prevItems !== items || prevFilterPredicate !== filterPredicate || prevSortComparator !== sortComparator ) { setPrevItems(items); setPrevFilterPredicate(() => filterPredicate); setPrevSortComparator(() => sortComparator); setPage(1); } const sortedFiltered = useMemo(() => { let result = filterPredicate ? items.filter(filterPredicate) : items.slice(); if (sortComparator) result = result.sort(sortComparator); return result; }, [items, filterPredicate, sortComparator]); const featuredItem = useMemo(() => { if (!isFeatured) return undefined; return sortedFiltered.find(isFeatured); }, [sortedFiltered, isFeatured]); const regularItems = useMemo( () => featuredItem ? sortedFiltered.filter((item) => item !== featuredItem) : sortedFiltered, [sortedFiltered, featuredItem], ); const displayedItems = useMemo( () => regularItems.slice(0, page * pageSize), [regularItems, page, pageSize], ); const hasMore = displayedItems.length < regularItems.length; const filteredCount = sortedFiltered.length; const loadMore = useCallback(() => { if (isLoading || !hasMore) return; if (simulatedLoadingMs > 0) { setIsLoading(true); setTimeout(() => { setPage((p) => p + 1); setIsLoading(false); }, simulatedLoadingMs); } else { setPage((p) => p + 1); } }, [isLoading, hasMore, simulatedLoadingMs]); const reset = useCallback(() => { setPage(1); setIsLoading(false); }, []); return { displayedItems, // Always returned (v0.2.1): gating on `page === 1` made the lead story // vanish after the first "load more". `regularItems` already excludes it, // so it renders exactly once regardless of how many pages are shown. featuredItem, hasMore, isLoading, filteredCount, loadMore, reset, }; } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"src/registry/components/layout/magazine-layout/magazine-layout.tsx","content":"$50","type":"registry:component","target":"components/magazine-layout/magazine-layout.tsx"},{"path":"src/registry/components/layout/magazine-layout/index.ts","content":"export { MagazineLayout, default } from \"./magazine-layout\";\nexport { useMagazineFilter } from \"./hooks/use-magazine-filter\";\nexport { useInfiniteScroll } from \"./hooks/use-infinite-scroll\";\nexport type {\n MagazineLayoutItemSlot,\n MagazineLayoutLabels,\n MagazineLayoutProps,\n UseMagazineFilterArgs,\n UseMagazineFilterReturn,\n} from \"./types\";\n","type":"registry:component","target":"components/magazine-layout/index.ts"},{"path":"src/registry/components/layout/magazine-layout/types.ts","content":"$51","type":"registry:component","target":"components/magazine-layout/types.ts"},{"path":"src/registry/components/layout/magazine-layout/parts/magazine-tower.tsx","content":"$52","type":"registry:component","target":"components/magazine-layout/parts/magazine-tower.tsx"},{"path":"src/registry/components/layout/magazine-layout/parts/infinite-loader.tsx","content":"$53","type":"registry:component","target":"components/magazine-layout/parts/infinite-loader.tsx"},{"path":"src/registry/components/layout/magazine-layout/hooks/use-infinite-scroll.ts","content":"\"use client\";\n\nimport { useEffect, type RefObject } from \"react\";\n\n/**\n * Wires an IntersectionObserver to a sentinel element. When the sentinel\n * enters the viewport AND `hasMore` is true AND `isLoading` is false,\n * `onLoadMore` is fired.\n */\nexport function useInfiniteScroll({\n ref,\n hasMore,\n isLoading,\n onLoadMore,\n threshold = 0.1,\n}: {\n ref: RefObject;\n hasMore: boolean;\n isLoading: boolean;\n onLoadMore: (() => void) | undefined;\n threshold?: number;\n}) {\n useEffect(() => {\n const sentinel = ref.current;\n if (!sentinel) return;\n if (!onLoadMore) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n if (entries[0].isIntersecting && hasMore && !isLoading) {\n onLoadMore();\n }\n },\n { threshold },\n );\n\n observer.observe(sentinel);\n return () => observer.disconnect();\n }, [ref, hasMore, isLoading, onLoadMore, threshold]);\n}\n","type":"registry:component","target":"components/magazine-layout/hooks/use-infinite-scroll.ts"},{"path":"src/registry/components/layout/magazine-layout/hooks/use-magazine-filter.ts","content":"$54","type":"registry:component","target":"components/magazine-layout/hooks/use-magazine-filter.ts"}],"className":"h-[70svh] min-h-80"}]]}]