50: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"] 51: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"] 52:T1ef7,"use client" import * as React from "react" import { ArrowDownIcon, ArrowUpIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { formatCount } from "@/lib/format-count" import { cn } from "@/lib/utils" type JumpBarType = "unread-above" | "new-below" | "history" type JumpBarStrings = { /** Unread messages above. `shown` is the count as displayed, capped at 99+. `since` is empty without a time. */ unreadAbove: (count: number, shown: string, since: string) => string /** New messages below. */ newBelow: (count: number, shown: string) => string /** The history bar's message. */ history: string /** The mark as read button. */ markRead: string /** The jump to present button. */ jumpToPresent: string } const plural = (count: number) => (count === 1 ? "message" : "messages") const defaultStrings: JumpBarStrings = { unreadAbove: (count, shown, since) => since ? `${shown} new ${plural(count)} since ${since}` : `${shown} new ${plural(count)}`, newBelow: (count, shown) => `${shown} new ${plural(count)}`, history: "You're viewing older messages", markRead: "Mark as read", jumpToPresent: "Jump to present", } const MAX_SHOWN = 99 type JumpBarProps = Omit, "children"> & { /** Which bar: unread messages above, new messages below, or reading history. */ type: JumpBarType /** How many unread or new messages. Shown up to 99+, read out in full. */ count?: number /** When the unread messages begin, for `unread-above`. */ since?: Date /** Jumps to the first unread message, the newest message, or the present. */ onJump?: () => void /** Marks the conversation read, for `unread-above`. */ onMarkRead?: () => void /** Locale for the count and time. */ locale?: string /** The bar's copy. Swap it to translate. */ strings?: Partial } function JumpBar({ type, count = 0, since, onJump, onMarkRead, locale = "en", strings: overrides, className, ...props }: JumpBarProps) { const strings = { ...defaultStrings, ...overrides } const capped = formatCount(count, { max: MAX_SHOWN, locale }) const shown = capped.shown // A capped count keeps the visible words in the name, so speech input can // say what's on screen, and adds the full number after them (WCAG 2.5.3). const exact = count > MAX_SHOWN ? ( ({capped.exact}) ) : null const time = since ? new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", }).format(since) : "" if (type === "unread-above") { return (

{/* Default buttons on the bar's own primary fill: they show only on hover, in primary-hover. */} {/* Button doesn't shrink by default; this one gives way so Mark as read always fits, and on a narrow bar its label drops the time. */} {onMarkRead ? ( ) : null}

) } if (type === "new-below") { return (

) } return (

{/* Wraps to a second line rather than cutting the sentence short. */} {strings.history}

) } /* * Whether a scroll container sits within `threshold` pixels of its end. * Takes the element rather than a ref so it can resubscribe when the * element changes: pass it from a callback ref, `ref={setElement}`. */ function useAtBottom(element: HTMLElement | null, threshold = 150) { const subscribe = React.useCallback( (notify: () => void) => { if (!element) return () => {} element.addEventListener("scroll", notify, { passive: true }) // Content growing underneath moves the end without a scroll event. const resize = new ResizeObserver(notify) resize.observe(element) for (const child of element.children) resize.observe(child) // Messages appended later are new children, which need watching too. const mutations = new MutationObserver((records) => { for (const record of records) { for (const node of record.addedNodes) { if (node instanceof Element) resize.observe(node) } for (const node of record.removedNodes) { if (node instanceof Element) resize.unobserve(node) } } notify() }) mutations.observe(element, { childList: true }) return () => { element.removeEventListener("scroll", notify) mutations.disconnect() resize.disconnect() } }, [element] ) return React.useSyncExternalStore( subscribe, () => !element || element.scrollHeight - element.scrollTop - element.clientHeight <= threshold, () => true ) } /* * Scrolls a message into view and focuses it, so focus never stays on a bar * that's about to disappear. Smooth for a short hop; instant under reduced * motion, and for a long jump, where gliding past screens of history helps * nobody. */ function jumpTo( target: HTMLElement, { container, block = "center", }: { /** The scroll container, to judge how far the jump is. */ container?: HTMLElement | null /** Where the target lands in view. */ block?: ScrollLogicalPosition } = {} ) { const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches const far = container ? Math.abs( target.getBoundingClientRect().top - container.getBoundingClientRect().top ) > container.clientHeight * 3 : false target.scrollIntoView({ block, behavior: reduce || far ? "instant" : "smooth", }) target.focus({ preventScroll: true }) } export { JumpBar, useAtBottom, jumpTo, type JumpBarProps, type JumpBarType, type JumpBarStrings, } 53:T467,export type FormatCountOptions = { /** Above this the count shows as `max+`, such as 99+. */ max?: number /** `compact` shortens counts from 1,000 up, such as 1.2K. */ notation?: "standard" | "compact" /** Puts a plus before the count, for things not shown, such as +4. */ plus?: boolean /** BCP 47 locale for the digits and separators. */ locale?: string } /** * A count as it should be shown: capped, shortened or signed. The exact * number is for speech, so a capped or shortened count says it in full. */ export function formatCount( value: number, { max, notation = "standard", plus = false, locale }: FormatCountOptions = {} ) { const standard = new Intl.NumberFormat(locale) const exact = standard.format(value) let shown: string if (max !== undefined && value > max) { shown = `${standard.format(max)}+` } else if (notation === "compact" && Math.abs(value) >= 1000) { shown = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1, }).format(value) } else { shown = exact } return { shown: plus ? `+${shown}` : shown, exact } } 4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@fibo","registryDependencies":["https://fibo.toribryan.com/r/button.json","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/jump-bar.tsx","content":"$52","type":"registry:ui"},{"path":"registry/lib/format-count.ts","content":"$53","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]