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:T3c23,"use client"; import { Tooltip } from "@base-ui/react/tooltip"; import { createContext, use, useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/cn"; /* ------------------------------------------------------------------------------------------------- * Where to cut * -----------------------------------------------------------------------------------------------*/ const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter() : null; // Cut between graphemes, never inside an emoji or an accented letter. const graphemes = (s: string) => (segmenter ? Array.from(segmenter.segment(s), (g) => g.segment) : Array.from(s)); /** * How many characters stay whole after the ellipsis in middle truncation, when you don't say. * Paths keep their last segment (the file), file names keep their extension plus a few * characters (where "v2" and "final" live), anything else keeps its last few characters * (enough to tell two IDs or hashes apart). */ export function autoTail(text: string) { const n = graphemes(text).length; const slash = Math.max(text.lastIndexOf("/"), text.lastIndexOf("\\")); if (slash > 0 && slash < text.length - 1) return Math.min(n, graphemes(text.slice(slash)).length); const ext = /\.[a-z0-9]{1,8}$/i.exec(text); // Short names leave at least four characters in front, so there's always a head to cut. if (ext && ext.index > 0) return Math.max(0, Math.min(ext[0].length + 6, n - 4)); return Math.min(8, Math.floor(n / 3)); } /** Splits text into the part that shrinks and the part that stays. Pure, so it renders the same on the server. */ export function splitTail(text: string, tail: number | "auto" = "auto") { const g = graphemes(text); const keep = Math.max(0, Math.min(g.length, tail === "auto" ? autoTail(text) : tail)); return { head: g.slice(0, g.length - keep).join(""), tail: g.slice(g.length - keep).join("") }; } /* ------------------------------------------------------------------------------------------------- * Measuring * -----------------------------------------------------------------------------------------------*/ const overflows = (el: HTMLElement) => el.scrollWidth - el.clientWidth > 0 || el.scrollHeight - el.clientHeight > 1; /** Watches an element's size, and web fonts arriving, and calls `measure` for each. */ function useMeasure(ref: React.RefObject, measure: () => void, deps: unknown[]) { useEffect(() => { const el = ref.current; if (!el) return; // Observing fires once straight away, which is also the first measurement. const ro = new ResizeObserver(() => measure()); ro.observe(el); let live = true; document.fonts?.ready.then(() => live && measure()); return () => { live = false; ro.disconnect(); }; // eslint-disable-next-line react-hooks/exhaustive-deps -- re-measure when the caller's content changes }, [ref, measure, ...deps]); } /** * Whether the text inside `ref` is actually cut off right now. Re-measures on resize, when the * text changes and once web fonts have loaded, so it never reports on a fallback font's width. */ export function useIsTruncated(deps: unknown[] = []) { const ref = useRef(null); const [truncated, setTruncated] = useState(false); const measure = useCallback(() => { if (ref.current) setTruncated(overflows(ref.current)); }, []); useMeasure(ref, measure, deps); return { ref, truncated }; } /* ------------------------------------------------------------------------------------------------- * Group * -----------------------------------------------------------------------------------------------*/ const GroupContext = createContext<{ delay: number } | null>(null); export type TruncateGroupProps = { /** Milliseconds of hover before the first reveal in the group. */ delay?: number; /** Once one reveal closes, neighbors hovered within this many milliseconds open instantly. */ timeout?: number; children?: React.ReactNode; }; /** * Wrap a list or table. The first row waits, then moving down the list reveals each * truncated row on contact, the way a file browser does. */ export function TruncateGroup({ delay = 400, timeout = 400, children }: TruncateGroupProps) { return ( {children} ); } /* ------------------------------------------------------------------------------------------------- * Truncate * -----------------------------------------------------------------------------------------------*/ // The nearest thing a keyboard user can land on, so tabbing onto a row reveals its name. const HOST = "a[href],button,input,select,textarea,summary,[tabindex],[role=row],[role=option],[role=menuitem],[role=treeitem],[role=gridcell]"; // Surface padding and border, in px. The reveal is offset by exactly this so its text lands on the original. const PAD_X = 6; const PAD_Y = 2; const BORDER = 1; type FontMatch = Pick< React.CSSProperties, "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "color" | "fontFeatureSettings" | "fontVariantNumeric" >; function readFont(el: HTMLElement): FontMatch { const s = getComputedStyle(el); return { fontFamily: s.fontFamily, fontSize: s.fontSize, fontWeight: s.fontWeight, letterSpacing: s.letterSpacing, lineHeight: s.lineHeight, color: s.color, fontFeatureSettings: s.fontFeatureSettings, fontVariantNumeric: s.fontVariantNumeric, }; } export type TruncateProps = Omit, "children"> & { /** The full text. Always what screen readers read and what copying gives you. */ children: string; /** Cut at the end, or in the middle so the end (an extension, a file, the last digits of an ID) survives. */ position?: "end" | "middle"; /** * Middle only: characters kept whole after the ellipsis. "auto" keeps a path's last * segment, a file's extension plus a few characters, or an ID's last few characters. */ tail?: number | "auto"; /** End only: clamp to this many lines instead of one. */ lines?: number; /** * How the full text appears when it's cut off. "inline" unfolds it in place, over the * original, in the same font; "tooltip" shows it above; "none" never shows it. */ reveal?: "inline" | "tooltip" | "none"; /** Milliseconds of hover before revealing. Inside a TruncateGroup, the group's delay. */ delay?: number; /** Where to portal the reveal. Defaults to document.body. */ container?: Tooltip.Portal.Props["container"]; /** Called when the text starts or stops being cut off. */ onTruncatedChange?: (truncated: boolean) => void; }; /** * One line (or a few) of text that cuts itself off cleanly, at the end or in the middle, * and offers the full text only when something was actually cut. */ export function Truncate({ children: text, position = "end", tail = "auto", lines = 1, reveal = "inline", delay, container, onTruncatedChange, className, ...rest }: TruncateProps) { const group = use(GroupContext); const ref = useRef(null); const headRef = useRef(null); const tailRef = useRef(null); const dotsRef = useRef(null); // `cut` is the head's width in px when it's been cut, null when everything fits. const [fit, setFit] = useState<{ truncated: boolean; cut: number | null }>({ truncated: false, cut: null }); const [open, setOpen] = useState(false); const [font, setFont] = useState(); const middle = position === "middle"; const multiline = !middle && lines > 1; const { head, tail: end } = middle ? splitTail(text, tail) : { head: text, tail: "" }; const truncated = fit.truncated; const measure = useCallback(() => { const el = ref.current; if (!el) return; const commit = (next: { truncated: boolean; cut: number | null }) => setFit((prev) => (prev.truncated === next.truncated && prev.cut === next.cut ? prev : next)); if (!middle) return commit({ truncated: overflows(el), cut: null }); // Middle: find the longest run of the head that fits beside the ellipsis and the tail, // measured on the rendered glyphs (a Range, no DOM writes), and clip the head to exactly // that width. CSS ellipsis would stop at a glyph and leave a gap before the tail. const node = headRef.current?.firstChild; const tailWidth = tailRef.current?.getBoundingClientRect().width ?? 0; const available = el.clientWidth; if (!(node instanceof Text)) return commit({ truncated: tailWidth - available > 0.5, cut: null }); const range = document.createRange(); const widthTo = (i: number) => { range.setStart(node, 0); range.setEnd(node, i); return range.getBoundingClientRect().width; }; if (widthTo(node.length) + tailWidth <= available + 0.5) return commit({ truncated: false, cut: null }); const room = available - tailWidth - (dotsRef.current?.getBoundingClientRect().width ?? 0); const stops = [0]; for (const g of graphemes(node.data)) stops.push(stops[stops.length - 1] + g.length); let lo = 0; let hi = stops.length - 1; while (lo < hi) { const mid = Math.ceil((lo + hi) / 2); if (widthTo(stops[mid]) <= room) lo = mid; else hi = mid - 1; } // Never leave a space hanging before the ellipsis. let at = stops[lo]; while (at > 0 && /\s/.test(node.data[at - 1])) at--; commit({ truncated: true, cut: at > 0 ? widthTo(at) : 0 }); }, [middle]); useMeasure(ref, measure, [text, tail, lines]); const onChange = useRef(onTruncatedChange); useEffect(() => { onChange.current = onTruncatedChange; }); useEffect(() => { onChange.current?.(truncated); }, [truncated]); const show = useCallback(() => { if (ref.current) setFont(readFont(ref.current)); setOpen(true); }, [ref]); // Keyboard: reveal when focus lands on the row, link or option this text lives in. useEffect(() => { const host = ref.current?.closest(HOST); if (!host || reveal === "none") return; const onIn = (e: FocusEvent) => { if (e.target !== host || !host.matches(":focus-visible")) return; // A row can hold several (a name and its path): the first one that's cut is the one to unfold. if (host.querySelector("[data-slot=truncate][data-truncated]") === ref.current) show(); }; const onOut = (e: FocusEvent) => { if (e.target === host) setOpen(false); }; host.addEventListener("focusin", onIn); host.addEventListener("focusout", onOut); return () => { host.removeEventListener("focusin", onIn); host.removeEventListener("focusout", onOut); }; }, [ref, reveal, show]); const inline = reveal === "inline"; return ( (next ? show() : setOpen(false))} disabled={!truncated || reveal === "none"} disableHoverablePopup > } > {middle ? ( <> {/* The head and tail hold the whole text between them, inline so selecting and copying gives the real name. */} {head && ( {head} )} … {end && ( {end} )} {text} ) : ( text )} -anchor.height - PAD_Y - BORDER : 8} alignOffset={inline ? -PAD_X - BORDER : 0} collisionAvoidance={inline ? { side: "none", align: "shift", fallbackAxisSide: "none" } : undefined} collisionPadding={8} className="z-(--z-tooltip)" > {text} ); } 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}]]}],["$","$L61",null,{"namespace":"@stealth","registryDependencies":["https://www.stealth.pm/r/tokens.json","https://www.stealth.pm/r/cn.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/truncate.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]