60: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"] 61: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"] 62:T1903,"use client"; import { Popover as Base } from "@base-ui/react/popover"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useScopedTheme } from "./use-scoped-theme"; export type HintTone = | "neutral" | "accent" | "success" | "warning" | "danger" | "info"; const toneSkin: Record = { neutral: "border-border bg-surface-2", accent: "border-accent/25 bg-accent/12", success: "border-success/25 bg-success/12", warning: "border-warning/25 bg-warning/12", danger: "border-danger/25 bg-danger/12", info: "border-info/25 bg-info/12", }; const toneInk: Record = { neutral: "text-muted", accent: "text-accent", success: "text-success", warning: "text-warning", danger: "text-danger", info: "text-info", }; export interface HintPopoverProps { /** The element the hint hangs off. Rendered as the popover trigger. */ trigger: React.ReactNode; title?: React.ReactNode; icon?: React.ReactNode; /** Interactive footer, typically a dismiss Button. */ action?: React.ReactNode; tone?: HintTone; children: React.ReactNode; side?: "top" | "right" | "bottom" | "left"; /** Hover dwell before opening. Guards against drive-by pointers. */ openDelay?: number; /** * Grace period after the pointer leaves. Without it the panel closes while * the pointer crosses the gap, and the action inside becomes unclickable. */ closeDelay?: number; className?: string; } /** * A hover-and-focus popover that may contain interactive content. * * This is not a Tooltip and must not be one: a tooltip is announced through * `aria-describedby` and its contents are unreachable by keyboard, so a dismiss * button inside one is a trap. Base UI's Popover has no hover trigger of its * own, so the open state is controlled here. */ export function HintPopover({ trigger, title, icon, action, tone = "neutral", children, side = "top", openDelay = 120, closeDelay = 200, className, }: HintPopoverProps) { const [open, setOpen] = React.useState(false); const [probe, scopedTheme] = useScopedTheme(); const timer = React.useRef | undefined>( undefined, ); /** * A pointer press focuses the trigger before Base UI's click handler toggles * it. Without this, opening on focus would open the panel and the click would * immediately close it again. */ const focusFromPointer = React.useRef(false); const hovering = React.useRef(false); /** * Closing restores focus to the trigger, which would re-open it on focus. * Dismissing has to stick until focus genuinely leaves and comes back. */ const suppressFocusOpen = React.useRef(false); const cancel = React.useCallback(() => { if (timer.current != null) clearTimeout(timer.current); timer.current = undefined; }, []); React.useEffect(() => cancel, [cancel]); const schedule = React.useCallback( (next: boolean, delay: number) => { cancel(); timer.current = setTimeout(() => setOpen(next), delay); }, [cancel], ); const hoverIn = (e: React.PointerEvent) => { if (e.pointerType === "touch") return; hovering.current = true; schedule(true, openDelay); }; const hoverOut = (e: React.PointerEvent) => { if (e.pointerType === "touch") return; hovering.current = false; schedule(false, closeDelay); }; return ( { cancel(); // A mouse press lands on a panel hover already opened, and Base UI's // trigger toggles. While the pointer is over the trigger, hover owns // closing, otherwise the click that opens it also shuts it. if (!next && details.reason === "trigger-press" && hovering.current) return; if (!next) suppressFocusOpen.current = true; setOpen(next); }} > { focusFromPointer.current = true; }} onFocus={() => { if (focusFromPointer.current) { focusFromPointer.current = false; return; } if (suppressFocusOpen.current) return; cancel(); setOpen(true); }} onBlur={() => { suppressFocusOpen.current = false; }} /> ); } HintPopover.displayName = "HintPopover"; 5f:["$","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L60",null,{"namespace":"@usva","registryDependencies":["https://usva.build/r/overlay-core.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"hint-popover.tsx","content":"$62","type":"registry:ui","target":"components/ui/hint-popover.tsx"}],"className":"h-[70svh] min-h-80"}]]}]