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[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 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:T2c55,// Hairline UI · approval-card · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Ban, Clock, ShieldQuestion } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * APPROVAL CARD: the agent asks before it acts * * pending what it wants to do, with Approve and Deny; an * optional countdown rolls down second by second * approved the card folds into one line: the body closes, * "Needs your approval" morphs to "Approved" and a * check draws itself where the shield was * denied folds the same way into "Denied" * expired the countdown reaches 0:00 and it folds into * "Expired" * * One surface throughout: it changes shape instead of being * replaced. Works controlled (pass status) or on its own (it * remembers the choice). Mark destructive actions so Approve * reads as such. * ───────────────────────────────────────────────────────── */ export type ApprovalStatus = "pending" | "approved" | "denied" | "expired"; export interface ApprovalDetail { label: string; value: React.ReactNode; } export interface ApprovalCardProps extends Omit, "title"> { /** What the agent wants to do, e.g. "Send email to 3 people". */ title: string; description?: string; /** The specifics worth checking before approving. */ details?: ApprovalDetail[]; /** Why approval is needed, e.g. AI SDK's approval.requestReason. */ reason?: string; status?: ApprovalStatus; defaultStatus?: ApprovalStatus; onApprove?: () => void; onDeny?: () => void; approveLabel?: string; denyLabel?: string; /** Styles Approve as a destructive action. */ destructive?: boolean; /** When the request lapses (ms). Shows a countdown, then expires. */ expiresAt?: number; onExpire?: () => void; } const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const LABELS: Record = { pending: "Needs your approval", approved: "Approved", denied: "Denied", expired: "Expired" }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); function DrawnCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) { return ( ); } export function ApprovalCard({ title, description, details, reason, status, defaultStatus = "pending", onApprove, onDeny, approveLabel = "Approve", denyLabel = "Deny", destructive = false, expiresAt, onExpire, className = "", ...props }: ApprovalCardProps) { const reduced = useReducedMotion(); const [ownStatus, setOwnStatus] = React.useState(defaultStatus); const current = status ?? ownStatus; const decided = current !== "pending"; const [now, setNow] = React.useState(expiresAt ?? 0); const cardRef = React.useRef(null); // Count down while pending; expire on time. React.useEffect(() => { if (current !== "pending" || expiresAt === undefined) return; const tick = () => { const t = Date.now(); setNow(t); if (t >= expiresAt) { if (status === undefined) setOwnStatus("expired"); onExpire?.(); } }; tick(); const timer = window.setInterval(tick, 1000); return () => window.clearInterval(timer); }, [current, expiresAt, status, onExpire]); const decide = (next: "approved" | "denied") => { // The buttons are about to fold away: keep focus on the card instead of dropping it on the page. if (cardRef.current?.contains(document.activeElement)) cardRef.current.focus({ preventScroll: true }); if (status === undefined) setOwnStatus(next); if (next === "approved") onApprove?.(); else onDeny?.(); }; const left = expiresAt === undefined ? 0 : Math.max(0, Math.ceil((expiresAt - now) / 1000)); const icons: Record = { pending: , approved: ( ), denied: , expired: , }; const fold = (open: boolean): React.CSSProperties => ({ gridTemplateRows: open ? "1fr" : "0fr", transition: reduced ? "none" : `grid-template-rows 480ms ${MORPH}`, }); const fade = (on: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, filter: on ? "none" : "blur(4px)", transition: reduced ? "none" : on ? `opacity 380ms ${MORPH} 120ms, filter 380ms ${MORPH} 120ms` : `opacity 160ms ease-out, filter 160ms ease-out`, }); return (

{/* The header is also the folded line: it keeps its place while everything under it closes. */}

{LABELS[current]} {/* The action slides into the line as the card folds. */} {title} {expiresAt !== undefined && ( Time left: )}

{/* Everything else folds shut once it's answered. */}

{title}

{description &&

{description}

} {details && details.length > 0 && (

{d.label}: {d.value}

)} {reason &&

{reason}

}

{/* Announces the answer; outside the buttons so their names stay their labels. */} {decided ? `${LABELS[current]}: ${title}` : ""}

); } 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":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-fade-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(4px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/approval-card.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]