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[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"] 53: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"] 54: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"] 55:T2370,// Hairline UI · thinking-indicator · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * THINKING INDICATOR: the gap before the first token * * orbit a dot circling a hairline ring * dots three dots in a soft wave * pulse a breathing dot * scan a bar sweeping a short track * * A label with a sweep of light and a timer whose seconds roll * ("Churning 44s") while running. When it's done the mark * blurs into a check that draws itself, the label morphs to * "Done in" and the time gains its tenths: "Done in 44.6s". * ───────────────────────────────────────────────────────── */ export type IndicatorVariant = "orbit" | "dots" | "pulse" | "scan"; export interface ThinkingIndicatorProps extends React.HTMLAttributes { variant?: IndicatorVariant; status?: "running" | "done"; label?: string; doneLabel?: string; /** Start time (ms); shows a live timer. */ startedAt?: number; } const MORPH = "cubic-bezier(0.16,1,0.3,1)"; // A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph. const SHEEN = "text-foreground [mask-image:linear-gradient(90deg,rgb(0_0_0/0.45)_35%,#000_50%,rgb(0_0_0/0.45)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none] motion-reduce:text-foreground/70"; const TENTHS = { minimumFractionDigits: 1, maximumFractionDigits: 1 }; const WHOLE = { maximumFractionDigits: 0 }; const TWO_DIGITS = { minimumIntegerDigits: 2, maximumFractionDigits: 0 }; 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 formatElapsed(ms: number) { const s = Math.max(0, ms) / 1000; return s < 60 ? `${s.toFixed(1)}s` : `${Math.floor(s / 60)}m ${String(Math.floor(s % 60)).padStart(2, "0")}s`; } /** Seconds that roll up as they pass; minutes slide open at the first minute; tenths join once it's settled. */ function Elapsed({ ms, settled, reduced }: { ms: number; settled: boolean; reduced: boolean }) { const total = Math.max(0, ms) / 1000; const minutes = Math.floor(total / 60); const seconds = minutes ? Math.floor(total % 60) : settled ? Math.floor(total * 10) / 10 : Math.floor(total); return ( ); } function Mark({ variant }: { variant: IndicatorVariant }) { if (variant === "dots") return ( {[0, 150, 300].map((delay) => ( ))} ); if (variant === "pulse") return ( ); if (variant === "scan") return ( ); return ( ); } export function ThinkingIndicator({ variant = "orbit", status = "running", label = "Thinking", doneLabel, startedAt, className = "", ...props }: ThinkingIndicatorProps) { const reduced = useReducedMotion(); const running = status === "running"; const [now, setNow] = React.useState(startedAt ?? 0); const [endedAt, setEndedAt] = React.useState(undefined); // Re-render on each whole second of the run (not every frame), and remember when it settled. React.useEffect(() => { if (!running) { setEndedAt((prev) => prev ?? Date.now()); return; } setEndedAt(undefined); if (startedAt === undefined) return; let timer = 0; const tick = () => { const t = Date.now(); setNow(t); timer = window.setTimeout(tick, 1000 - ((t - startedAt) % 1000) + 5); }; tick(); return () => window.clearTimeout(timer); }, [running, startedAt]); const elapsed = startedAt === undefined ? undefined : (running ? now : (endedAt ?? now)) - startedAt; const showTime = elapsed !== undefined && (running || doneLabel === undefined); const text = running ? label : (doneLabel ?? (elapsed !== undefined ? "Done in" : "Done")); return (

{/* What it's doing, for screen readers: the label while it works, then the outcome. Never the ticking timer. */} {running ? label : showTime && elapsed !== undefined ? `${text} ${formatElapsed(elapsed)}` : text}

); } 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":[null,["$","$L51",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L52",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":["$","$L53",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-sheen {\n\tfrom {\n\t\tmask-position: 150% 0;\n\t}\n\tto {\n\t\tmask-position: -50% 0;\n\t}\n}\n\n@keyframes ui-bounce {\n\t0%, 80%, 100% {\n\t\ttransform: translateY(0);\n\t\topacity: 0.35;\n\t}\n\t40% {\n\t\ttransform: translateY(-3px);\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ui-breathe {\n\t0%, 100% {\n\t\ttransform: scale(0.82);\n\t\topacity: 0.55;\n\t}\n\t50% {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ui-scan {\n\tfrom {\n\t\ttransform: translateX(-100%);\n\t}\n\tto {\n\t\ttransform: translateX(250%);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L54",null,{"files":[{"path":"registry/thinking-indicator.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]