51: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"] 52: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"] 53:T177b,"use client"; import { useEffect, useLayoutEffect, useRef, useState, type ComponentProps, type RefObject } from "react"; import { createPortal } from "react-dom"; import { cn } from "./lib/cn"; import "./shared/styles-3.css"; import "./morph-surface.css"; type Box = { left: number; top: number; width: number; height: number }; const read = (element: Element, name: string, fallback: string) => getComputedStyle(element).getPropertyValue(name).trim() || fallback; const ms = (value: string) => (value.endsWith("ms") ? parseFloat(value) : value.endsWith("s") ? parseFloat(value) * 1000 : 280); /** * A fixed panel that grows out of an element and shrinks back into it. The origin keeps its place; the panel * starts as an exact copy of its box, so it reads as the element itself opening. */ export function MorphSurface({ open, originRef, placement = "below", width = 280, gap = 6, radius = 12, onExited, className, style, children, ...rest }: { open: boolean; originRef: RefObject; /** "below" opens under the origin; "center" opens in the middle of the screen near the top. */ placement?: "below" | "center"; /** Pixels, or "origin" to match the origin's width at least. */ width?: number | "origin"; gap?: number; radius?: number; onExited?: () => void; } & Omit, "ref">) { const [shown, setShown] = useState(open); if (open && !shown) setShown(true); const panel = useRef(null); const body = useRef(null); const home = useRef(null); const animation = useRef(null); const exiting = useRef(false); const place = (origin: DOMRect, natural: number): Box => { const vw = window.innerWidth, vh = window.innerHeight; const w = Math.min(vw - 16, width === "origin" ? Math.max(origin.width, 220) : width); if (placement === "center") return { width: w, height: Math.min(natural, vh - 96), left: (vw - w) / 2, top: Math.max(24, vh * 0.12) }; const left = Math.max(8, Math.min(origin.left, vw - w - 8)); const spaceBelow = vh - origin.bottom - gap - 8; const spaceAbove = origin.top - gap - 8; const flip = natural > spaceBelow && spaceAbove > spaceBelow; const height = Math.min(natural, flip ? spaceAbove : spaceBelow); return { width: w, height, left, top: flip ? origin.top - gap - height : origin.bottom + gap }; }; const apply = (node: HTMLElement, box: Box, r: number) => Object.assign(node.style, { left: `${box.left}px`, top: `${box.top}px`, width: `${box.width}px`, height: `${box.height}px`, borderRadius: `${r}px` }); // Open: measure where the panel will end up, then grow from the origin to it. useLayoutEffect(() => { const node = panel.current, content = body.current, origin = originRef.current; if (!open || !shown || !node || !content || !origin) return; exiting.current = false; animation.current?.cancel(); const start = origin.getBoundingClientRect(); node.style.height = "auto"; node.style.width = `${placement === "center" ? Math.min(window.innerWidth - 16, width === "origin" ? 280 : width) : Math.min(window.innerWidth - 16, width === "origin" ? Math.max(start.width, 220) : width)}px`; const natural = content.scrollHeight; const end = place(start, natural); home.current = { left: start.left, top: start.top, width: start.width, height: start.height }; apply(node, end, radius); if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const duration = ms(read(node, "--duration-travel", "280ms")); const easing = read(node, "--ease-showcase", "cubic-bezier(0.22, 1, 0.36, 1)"); animation.current = node.animate( [ { left: `${start.left}px`, top: `${start.top}px`, width: `${start.width}px`, height: `${start.height}px`, borderRadius: `${Math.min(radius, start.height / 2)}px` }, { left: `${end.left}px`, top: `${end.top}px`, width: `${end.width}px`, height: `${end.height}px`, borderRadius: `${radius}px` }, ], { duration, easing }, ); content.animate([{ opacity: 0 }, { opacity: 0, offset: 0.35 }, { opacity: 1 }], { duration, easing: "ease-out" }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [open, shown]); // Close: shrink back into the origin, then unmount. useEffect(() => { const node = panel.current; if (open || !shown || !node || exiting.current) return; exiting.current = true; const finish = () => { setShown(false); exiting.current = false; onExited?.(); }; const target = originRef.current?.getBoundingClientRect() ?? home.current; if (!target || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { finish(); return; } animation.current?.cancel(); const here = node.getBoundingClientRect(); const duration = ms(read(node, "--duration-travel", "280ms")) * 0.8; const out = node.animate( [ { left: `${here.left}px`, top: `${here.top}px`, width: `${here.width}px`, height: `${here.height}px`, borderRadius: `${radius}px`, opacity: 1 }, { left: `${target.left}px`, top: `${target.top}px`, width: `${target.width}px`, height: `${target.height}px`, borderRadius: `${Math.min(radius, target.height / 2)}px`, opacity: 0.2 }, ], { duration, easing: "cubic-bezier(0.4, 0, 0.2, 1)", fill: "forwards" }, ); body.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: duration * 0.5, fill: "forwards" }); out.onfinish = finish; // eslint-disable-next-line react-hooks/exhaustive-deps }, [open, shown]); if (!shown || typeof document === "undefined") return null; return createPortal(

{children}

, document.body, ); } 50:["$","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/morph-surface.tsx","content":"$53","type":"registry:ui","target":"components/ui/morph-surface.tsx"},{"path":"ui/shared/styles-3.css","content":"/* Shared by expanding-search.tsx, morph-surface.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-surface=\"morph\"] {\n border: 1px solid var(--border);\n background: var(--elevated, var(--background));\n box-shadow: var(--shadow-overlay, 0 12px 40px rgb(0 0 0 / 0.22));\n }\n}\n","type":"registry:file","target":"components/ui/shared/styles-3.css"},{"path":"ui/morph-surface.css","content":"/* morph-surface.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"morph-surface\"] {\n border: 1px solid var(--border);\n background: var(--elevated, var(--background));\n box-shadow: var(--shadow-overlay, 0 12px 40px rgb(0 0 0 / 0.22));\n }\n}\n","type":"registry:file","target":"components/ui/morph-surface.css"}],"className":"h-[70svh] min-h-80"}]]}]