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:T125a,"use client"; import { Slot, Slottable } from "@radix-ui/react-slot"; import { LoaderCircle } from "lucide-react"; import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./shared/loading-indicator.css"; import "./button.css"; /* Colour, material and press live in button.css keyed on data-variant, so a consumer's utility classes still override them. Raised to press: the button sinks 1px into an inner shade instead of scaling. */ const variants = { default: "", secondary: "", ghost: "", destructive: "", }; const sizes = { sm: "h-8 gap-1.5 rounded-control px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11", md: "h-[var(--control-height)] gap-2 rounded-button px-3.5 text-sm", lg: "h-11 gap-2 rounded-touch px-[18px] text-[15px]", icon: "size-[var(--control-height)] rounded-button p-0", }; export type ButtonProps = ComponentProps<"button"> & { variant?: keyof typeof variants; size?: keyof typeof sizes; asChild?: boolean; /** Shows a spinner over the label and swallows clicks while keeping focus and width. */ loading?: boolean; /** Animate a meaningful label/icon change, such as saving → saved. */ feedbackKey?: string; }; export function Button({ className, variant = "default", size = "md", asChild = false, loading = false, feedbackKey, disabled, "aria-disabled": ariaDisabled, children, onClick, onClickCapture, tabIndex, type = "button", ...props }: ButtonProps) { const Component = asChild ? Slot : "button"; const nativeDisabled = Boolean(disabled); const blocked = nativeDisabled || loading || ariaDisabled === true || ariaDisabled === "true"; return ( { if (blocked && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); } props.onKeyDown?.(event); }} onClickCapture={(event) => { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onClickCapture?.(event); }} onClick={onClick} > {loading && asChild && ( )} {loading && !asChild && feedbackKey === undefined && ( )} {loading && !asChild && feedbackKey === undefined ? ( {children} ) : feedbackKey !== undefined && !asChild ? ( {loading && ( ) : ( children )} ); } function ButtonFeedback({ stateKey, children, }: { stateKey: string; children: ReactNode; }) { const content = useRef(null); const [initialKey] = useState(stateKey); const [width, setWidth] = useState(); useLayoutEffect(() => { const element = content.current; if (!element) return; const measure = () => setWidth(element.offsetWidth); measure(); const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [stateKey]); return ( {children} ); } 55:T1805,"use client"; import { ChevronsUpDown, X } from "lucide-react"; import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"; import { Button } from "./button"; import { cn } from "./lib/cn"; import "./shared/comment-action.css"; import "./shared/tool-icon.css"; import "./shared/note-close.css"; import "./notification-stack.css"; export type StackNotification = { id: string; title: string; body?: string; icon?: ReactNode; action?: { label: string; onClick: () => void }; }; const GAP = 8; const PEEK = 10; const VISIBLE = 3; /** * Newest notification in front, a few more peeking behind. Hover, focus or the toggle fans them out into a list. * New ones push in at the top; dismissing one closes the gap. */ export function NotificationStack({ notifications, onDismiss, onClear, label = "Notifications", className, }: { /** Newest first. */ notifications: readonly StackNotification[]; onDismiss: (id: string) => void; onClear?: () => void; label?: string; className?: string; }) { const [pinned, setPinned] = useState(false), [hover, setHover] = useState(false), [focus, setFocus] = useState(false), [heights, setHeights] = useState>({}); const refs = useRef(new Map()); const leave = useRef>(undefined); const expanded = pinned || hover || focus; const measure = useCallback(() => { const next: Record = {}; refs.current.forEach((el, id) => (next[id] = el.offsetHeight)); setHeights((prev) => (JSON.stringify(prev) === JSON.stringify(next) ? prev : next)); }, []); useEffect(() => { const observer = new ResizeObserver(measure); refs.current.forEach((el) => observer.observe(el)); // observing reports each size once return () => observer.disconnect(); }, [notifications, measure]); useEffect(() => () => clearTimeout(leave.current), []); const h = (id: string) => heights[id] ?? 72; const front = notifications[0] ? h(notifications[0].id) : 0; const offsets = notifications.map((_, i) => notifications.slice(0, i).reduce((sum, n) => sum + h(n.id) + GAP, 0)); const total = expanded ? Math.max(0, offsets.at(-1) ?? 0) + (notifications.at(-1) ? h(notifications.at(-1)!.id) : 0) : front + Math.min(VISIBLE - 1, Math.max(0, notifications.length - 1)) * PEEK; return (

{ if (event.pointerType === "mouse") { clearTimeout(leave.current); setHover(true); } }} onPointerLeave={() => { clearTimeout(leave.current); leave.current = setTimeout(() => setHover(false), 160); }} onFocus={() => setFocus(true)} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocus(false); }} onKeyDown={(event) => { if (event.key === "Escape" && (pinned || focus)) { setPinned(false); } }} > {notifications.length > 1 && (

{onClear && ( )}

)}

{/* Empty shells under the front card suggest how many more there are. */} {notifications.slice(1, VISIBLE).map((n, k) => ( setPinned(true)} style={{ height: front, transform: `translateY(${(k + 1) * PEEK}px) scale(${1 - (k + 1) * 0.05})`, zIndex: 0 }} /> ))} {notifications.map((n, i) => { const behind = !expanded && i > 0; const hidden = !expanded && i > 0; return (

{ if (el) refs.current.set(n.id, el); else refs.current.delete(n.id); }} data-slot="stack-note" data-behind={behind || undefined} data-hidden={hidden || undefined} inert={behind} role="group" aria-label={n.title} style={{ transform: expanded ? `translateY(${offsets[i]}px)` : `translateY(${Math.min(i, VISIBLE - 1) * PEEK}px) scale(${1 - Math.min(i, VISIBLE - 1) * 0.05})`, zIndex: notifications.length - i, }} > {n.icon && ( )}

{n.title}

{n.body &&

{n.body}

} {n.action && ( )}

); })}

{!notifications.length && (

Nothing new.

)}

); } 56:T136e,/* button.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="button"] { transition-property: background-color, color, border-color; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } /* Button material. Raised to press: a lit top edge and a small lift; the press travels 1px down and swaps the lift for an inner shade. Only translate animates (release on the settle curve); shadows swap. */ [data-slot="button"] { --b-bg: var(--raised); --b-bg-hover: var(--raised-hover); --b-bg-press: var(--raised-press); --b-fg: var(--foreground); --b-shadow: var(--shadow-raised); --b-shadow-press: var(--shadow-raised-press); background-color: var(--b-bg); color: var(--b-fg); box-shadow: var(--b-shadow); transition-property: background-color, color, border-color, translate; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-normal); transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle); } [data-slot="button"][data-variant="default"] { --b-bg: var(--accent); --b-bg-hover: var(--accent-hover); --b-bg-press: var(--accent-press); --b-fg: var(--accent-foreground); --b-shadow: var(--shadow-accent); --b-shadow-press: var(--shadow-accent-press); } [data-slot="button"][data-variant="destructive"] { --b-bg: var(--danger-fill); --b-bg-hover: var(--danger-fill-hover); --b-bg-press: var(--danger-fill-press); --b-fg: var(--danger-fill-foreground); --b-shadow: var(--shadow-danger); --b-shadow-press: var(--shadow-danger-press); } [data-slot="button"][data-variant="ghost"] { --b-bg: transparent; --b-bg-hover: var(--muted); --b-bg-press: var(--muted); --b-fg: var(--muted-foreground); --b-shadow: none; --b-shadow-press: none; } @media (hover: hover) { [data-slot="button"]:hover { background-color: var(--b-bg-hover); } [data-slot="button"][data-variant="ghost"]:hover { color: var(--foreground); } } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: 0 var(--motion-press-travel); background-color: var(--b-bg-press); box-shadow: var(--b-shadow-press); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms; transition-timing-function: var(--ease-out); } [data-slot="button"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background-color: var(--sunken); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); } [data-slot="button"][data-variant="ghost"]:is(:disabled, [aria-disabled="true"]):not( [aria-busy="true"] ) { background-color: transparent; box-shadow: none; } /* Loading keeps the exact width: the label stays in flow but invisible. */ [data-slot="button-label"] { display: inline-flex; align-items: center; gap: inherit; } /* Opacity, not visibility, so the label still names the button. */ [data-slot="button-label"][data-hidden="true"] { opacity: 0; } [data-slot="button-busy"] { position: absolute; inset: 0; display: grid; place-items: center; } [data-slot="button-feedback"] { display: inline-flex; align-items: center; gap: inherit; overflow: clip; transition: width var(--duration-normal) var(--ease-out); } [data-slot="button-feedback-label"] { display: inline-flex; flex-shrink: 0; align-items: center; gap: inherit; width: max-content; } [data-slot="button-feedback-label"][data-enter="true"] { animation: caliper-feedback-enter var(--duration-normal) var(--ease-out); } [data-slot="button"][aria-busy="true"] { pointer-events: none; } [data-slot="button"][data-action-phase="error"] { color: var(--danger); } @media (prefers-reduced-motion: reduce) { [data-slot="button"], [data-slot="button-feedback"] { transition: none; } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: none; } [data-slot="button-feedback-label"], [data-slot="button-feedback-label"][data-enter="true"] { animation: none; } } /* Toggle: pressed is recessed, as a toggled tool in a button group is. */ /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */ [data-slot="button"][data-variant="ghost"][data-toggle][aria-pressed="true"] { --b-bg: var(--sunken); --b-bg-hover: var(--sunken); --b-bg-press: var(--sunken); --b-fg: var(--foreground); --b-shadow: var(--shadow-sunken); --b-shadow-press: var(--shadow-sunken); } } 57:T41b,/* Shared by chat-thread.tsx, comment-thread.tsx, generative-renderer.tsx, link-unfurl.tsx, message.tsx, multi-chain-swap.tsx, notification-stack.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="comment-action"] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.375rem; border-radius: var(--radius-control); font-size: 0.75rem; color: var(--muted-foreground); outline: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } [data-slot="comment-action"]:hover { background: var(--muted); color: var(--foreground); } [data-slot="comment-action"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } [data-slot="comment-action"] svg { width: 0.75rem; height: 0.75rem; } @media (pointer: coarse) { [data-slot="comment-action"] { min-height: 2.75rem; padding-inline: 0.5rem; } } } 58:T750,/* notification-stack.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="stack-viewport"] { position: relative; transition: height var(--duration-travel) var(--ease-showcase); } [data-slot="stack-note"] { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.5rem 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-overlay, 12px); background: var(--elevated, var(--background)); transform-origin: 50% 0; transition: transform var(--duration-travel) var(--ease-showcase), opacity var(--duration-normal) var(--ease-out); animation: caliper-note-in var(--duration-travel) var(--ease-showcase); } [data-slot="stack-note"][data-hidden] { opacity: 0; pointer-events: none; } [data-slot="stack-peek"] { position: absolute; top: 0; left: 0; right: 0; border: 1px solid var(--border); border-radius: var(--radius-overlay, 12px); background: color-mix(in srgb, var(--elevated, var(--background)) 80%, var(--muted)); transform-origin: 50% 0; opacity: 0; cursor: pointer; pointer-events: none; transition: transform var(--duration-travel) var(--ease-showcase), opacity var(--duration-normal) var(--ease-out), height var(--duration-travel) var(--ease-showcase); } [data-slot="stack-peek"][data-on="true"] { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { [data-slot="stack-viewport"], [data-slot="stack-note"], [data-slot="stack-peek"] { transition: none; animation: none; } } @keyframes caliper-note-in { from { opacity: 0; translate: 0 -0.75rem; } } } 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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/button.tsx","content":"$54","type":"registry:ui","target":"components/ui/button.tsx"},{"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/notification-stack.tsx","content":"$55","type":"registry:ui","target":"components/ui/notification-stack.tsx"},{"path":"ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"loading-indicator\"] {\n animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"loading-indicator\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/loading-indicator.css"},{"path":"ui/button.css","content":"$56","type":"registry:file","target":"components/ui/button.css"},{"path":"ui/shared/comment-action.css","content":"$57","type":"registry:file","target":"components/ui/shared/comment-action.css"},{"path":"ui/shared/tool-icon.css","content":"/* Shared by approvals.tsx, booking-pill.tsx, morph-command.tsx, notification-stack.tsx, share-panel.tsx, tool-result.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"tool-icon\"] {\n display: grid;\n place-items: center;\n flex: none;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--radius-control);\n background: var(--muted);\n color: var(--foreground);\n }\n [data-slot=\"tool-icon\"] svg {\n width: 0.9375rem;\n height: 0.9375rem;\n }\n}\n","type":"registry:file","target":"components/ui/shared/tool-icon.css"},{"path":"ui/shared/note-close.css","content":"/* Shared by card-morph.tsx, link-unfurl.tsx, notification-stack.tsx, sheet-stack.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"note-close\"] {\n display: grid;\n place-items: center;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--radius-control);\n color: var(--muted-foreground);\n outline: none;\n transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);\n }\n [data-slot=\"note-close\"]:hover {\n background: var(--muted);\n color: var(--foreground);\n }\n [data-slot=\"note-close\"]:focus-visible {\n outline: 2px solid var(--ring);\n }\n [data-slot=\"note-close\"] svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n}\n","type":"registry:file","target":"components/ui/shared/note-close.css"},{"path":"ui/notification-stack.css","content":"$58","type":"registry:file","target":"components/ui/notification-stack.css"}],"className":"h-[70svh] min-h-80"}]]}]