52: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/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"],"RegistryDependencies"] 53: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"] 54:T1b5b,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const FILL = { type: "spring", stiffness: 210, damping: 34, mass: 0.9 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const EASE = [0.23, 1, 0.32, 1] as const; const DRAW = { duration: 0.3, ease: EASE, delay: 0.08 } as const; const INSTANT = { duration: 0 } as const; export type ScrollRef = { readonly current: HTMLElement | null }; export type UseReadingProgressOptions = { target?: ScrollRef; scroller?: ScrollRef; steps?: number; words?: number; wordsPerMinute?: number; }; export type ReadingProgressState = { step: number; steps: number; progress: number; percent: number; minutesLeft: number; totalMinutes: number; complete: boolean; }; function clamp01(n: number) { if (!Number.isFinite(n) || n < 0) return 0; return n > 1 ? 1 : n; } export function useReadingProgress({ target, scroller, steps = 24, words = 0, wordsPerMinute = 220, }: UseReadingProgressOptions = {}): ReadingProgressState { const [step, setStep] = useState(0); const frame = useRef(0); const read = useCallback(() => { frame.current = 0; const scrollEl = scroller?.current ?? null; const targetEl = target?.current ?? null; const viewport = scrollEl ? scrollEl.clientHeight : window.innerHeight; let ratio: number; if (targetEl) { const rect = targetEl.getBoundingClientRect(); const base = scrollEl ? scrollEl.getBoundingClientRect().top : 0; const travel = rect.height - viewport; ratio = travel <= 0 ? 1 : (base - rect.top) / travel; } else if (scrollEl) { const travel = scrollEl.scrollHeight - scrollEl.clientHeight; ratio = travel <= 0 ? 1 : scrollEl.scrollTop / travel; } else { const doc = document.documentElement; const travel = doc.scrollHeight - viewport; ratio = travel <= 0 ? 1 : window.scrollY / travel; } const next = Math.round(clamp01(ratio) * steps); setStep((prev) => (prev === next ? prev : next)); }, [scroller, target, steps]); useEffect(() => { const scrollEl = scroller?.current ?? null; const targetEl = target?.current ?? null; const source: EventTarget = scrollEl ?? window; const schedule = () => { if (frame.current) return; frame.current = requestAnimationFrame(read); }; source.addEventListener("scroll", schedule, { passive: true }); window.addEventListener("resize", schedule); const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule); if (observer) { if (targetEl) observer.observe(targetEl); if (scrollEl) observer.observe(scrollEl); if (!targetEl && !scrollEl) observer.observe(document.documentElement); } read(); return () => { source.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); observer?.disconnect(); if (frame.current) cancelAnimationFrame(frame.current); frame.current = 0; }; }, [read, scroller, target]); const progress = steps > 0 ? step / steps : 1; const totalMinutes = words > 0 ? Math.max(1, Math.ceil(words / wordsPerMinute)) : 0; const minutesLeft = words > 0 ? Math.ceil(((1 - progress) * words) / wordsPerMinute) : 0; return { step, steps, progress, percent: Math.round(progress * 100), minutesLeft, totalMinutes, complete: step >= steps, }; } export type ReadingProgressProps = UseReadingProgressOptions & { label?: string; doneLabel?: string; className?: string; }; export function ReadingProgress({ target, scroller, steps = 24, words = 0, wordsPerMinute = 220, label = "Reading progress", doneLabel = "End", className = "", }: ReadingProgressProps) { const { step, percent, minutesLeft, totalMinutes, complete } = useReadingProgress({ target, scroller, steps, words, wordsPerMinute }); const reduced = useReducedMotion(); const fillTransition = reduced ? INSTANT : FILL; const fadeTransition = reduced ? INSTANT : CROSSFADE; const estimate = words > 0; const readout = `${minutesLeft} min left`; const finish = `${doneLabel} · ${totalMinutes} min`; const valueText = estimate ? `${percent}% read, ${readout}` : `${percent}% read`; return (

{estimate ? (

{finish} {readout} {finish}

) : null}

); } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/interior/reading-progress.tsx","content":"$54","type":"registry:ui","target":"components/interior/reading-progress.tsx"}],"className":"h-[70svh] min-h-80"}]]}]