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:T3fea,// Hairline UI · action-receipt · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Check, ChevronRight, RotateCcw, X } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * ACTION RECEIPTS: what the agent did, and the way back * * done a quiet line per action: what happened, where; * Undo with a ring that drains while you still can, * folding away when the window closes * undoing the ring blurs into a spinner; "Undo" morphs to * "Undoing" * undone a strike draws itself across the line; "Undone" * failed why it failed, and Retry * stacked three or more fold into "3 actions · Undo all", * which opens into the list; the counts roll * * Undo is one button from first to last: its icon slot and label * change, it never gets swapped for another element. * * Feed it the actions your tools performed; it keeps the timing. * ───────────────────────────────────────────────────────── */ export type ReceiptStatus = "done" | "undoing" | "undone" | "failed"; export interface Receipt { id: string; /** What happened, e.g. "Added “Soft launch” to Saturday". */ title: string; /** Where or when, e.g. "Calendar · 9:00 am". */ detail?: string; icon?: React.ReactNode; status?: ReceiptStatus; error?: string; /** Until when it can be undone (ms timestamp). Without it, no Undo. */ undoUntil?: number; } export interface ActionReceiptsProps extends React.HTMLAttributes { actions: Receipt[]; onUndo?: (id: string) => void | Promise; /** Defaults to undoing each undoable action. */ onUndoAll?: () => void | Promise; onRetry?: (id: string) => void; /** Fold into a summary from this many actions (0 never folds). */ stackFrom?: number; /** How long the undo window is, for the ring (ms). */ undoWindow?: number; } const EASE = "cubic-bezier(0.23,1,0.32,1)"; 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 LINK = `inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px] font-medium text-foreground transition-colors hover:bg-accent ${FOCUS}`; 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}`, }); /** A piece of a line that opens out of nothing and folds back into it. */ function Reveal({ show, reduced, className = "", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) { return ( {children} ); } /** Re-renders when the next undo window closes, so Undo disappears on time. */ function useUndoClock(actions: Receipt[]) { const [now, setNow] = React.useState(() => Date.now()); React.useEffect(() => { const next = actions.map((a) => a.undoUntil ?? 0).filter((t) => t > now).sort((a, b) => a - b)[0]; if (!next) return; const timer = window.setTimeout(() => setNow(Date.now()), next - now + 20); return () => window.clearTimeout(timer); }, [actions, now]); return now; } /** A ring that drains from full to empty over the time left, with CSS only. */ function DrainRing({ until, window: total, reduced }: { until: number; window: number; reduced: boolean }) { const [start] = React.useState(() => Date.now()); const left = Math.max(0, until - start); const elapsed = Math.max(0, total - left); const c = 2 * Math.PI * 5.5; return ( ); } function Line({ action, now, pending, undoWindow, reduced, onUndo, onRetry, }: { action: Receipt; now: number; pending: boolean; undoWindow: number; reduced: boolean; onUndo?: (id: string) => void; onRetry?: (id: string) => void; }) { const status = pending ? "undoing" : action.status ?? "done"; const canUndo = status === "done" && Boolean(onUndo) && (action.undoUntil ?? 0) > now; const undone = status === "undone"; const failed = status === "failed"; // The one button's state: what it says and whether it does anything. const mode = status === "undoing" ? "undoing" : undone ? "undone" : failed && onRetry ? "retry" : canUndo ? "undo" : null; const [lastMode, setLastMode] = React.useState(mode); if (mode && mode !== lastMode) setLastMode(mode); const shown = mode ?? lastMode; const actionable = mode === "undo" || mode === "retry"; const label = { undo: "Undo", undoing: "Undoing", undone: "Undone", retry: "Retry" }; const layer = "absolute inset-0 flex items-center justify-center"; return (

{/* The strike draws itself across the title, left to right. */} {action.title} {(failed ? action.error : action.detail) && ( {failed ? action.error : action.detail} )} {status === "undoing" ? `Undoing ${action.title}` : undone ? `Undone: ${action.title}` : failed ? `Failed: ${action.error ?? action.title}` : ""} {shown && ( )}

); } export function ActionReceipts({ actions, onUndo, onUndoAll, onRetry, stackFrom = 3, undoWindow = 10_000, className = "", ...props }: ActionReceiptsProps) { const reduced = useReducedMotion(); const now = useUndoClock(actions); const [pending, setPending] = React.useState>(() => new Set()); const [open, setOpen] = React.useState(false); const listId = React.useId(); const undo = async (id: string) => { if (!onUndo) return; setPending((p) => new Set(p).add(id)); try { await onUndo(id); } finally { setPending((p) => { const next = new Set(p); next.delete(id); return next; }); } }; const undoable = actions.filter((a) => (a.status ?? "done") === "done" && (a.undoUntil ?? 0) > now && !pending.has(a.id)); const undoAll = async () => { if (onUndoAll) { setPending(new Set(undoable.map((a) => a.id))); try { await onUndoAll(); } finally { setPending(new Set()); } } else await Promise.all(undoable.map((a) => undo(a.id))); }; const stacked = stackFrom > 0 && actions.length >= stackFrom; const failed = actions.filter((a) => a.status === "failed").length; const undone = actions.filter((a) => a.status === "undone").length; const busy = pending.size > 0; const lines = (

))}

); if (!stacked) { return (

{lines}

); } return (

{onUndo && ( // Opens while there's more than one thing to undo; says what it's doing while it does it. 1 || busy} reduced={reduced} className="shrink-0"> )}

{lines}

); } 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}\n\n@keyframes ui-drain {\n\tfrom {\n\t\tstroke-dashoffset: 0;\n\t}\n\tto {\n\t\tstroke-dashoffset: var(--ui-ring);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/action-receipt.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]