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:T295c,"use client"; import { ChevronRightIcon, DotSmallIcon } from "blode-icons-react"; import { motion } from "motion/react"; import type * as React from "react"; import { cn } from "@/lib/utils"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; import { Badge } from "@/components/ui/badge"; // Self-contained shimmer for the active step label — no global CSS required. const SHIMMER_GRADIENT = "linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 35%, var(--foreground) 50%, var(--muted-foreground) 65%, var(--muted-foreground) 100%)"; const ShimmerText = ({ children, className, }: { children: React.ReactNode; className?: string; }) => ( {children} ); // ─── ThinkingSteps (root) ─────────────────────────────────────────────────── interface ThinkingStepsProps extends Omit< React.ComponentProps<"div">, "children" | "defaultValue" > { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; children: React.ReactNode; } const ThinkingSteps = ({ defaultOpen = true, open, onOpenChange, children, className, ref, ...props }: ThinkingStepsProps) => { const controlled = open !== undefined; return ( onOpenChange(v === "thinking") } : {})} {...props} > {children} ); }; // ─── ThinkingStepsHeader ──────────────────────────────────────────────────── const ThinkingStepsHeader = ({ children = "Thinking", className, ...props }: React.ComponentProps) => (

span:first-child]:flex-none [&[data-panel-open]_[data-chevron]]:rotate-90", className, )} {...props} > {children}

); // ─── ThinkingStepsContent ─────────────────────────────────────────────────── const ThinkingStepsContent = ({ children, className, ...props }: React.ComponentProps<"div">) => (

{children}

); // ─── ThinkingStep ─────────────────────────────────────────────────────────── type StepStatus = "complete" | "active" | "pending"; interface ThinkingStepProps { /** Icon component (from blode-icons-react) shown in the marker column. */ icon?: React.ElementType; showIcon?: boolean; label: string; description?: string; status?: StepStatus; /** Removes the connector line below the last step. */ isLast?: boolean; children?: React.ReactNode; className?: string; } const ThinkingStep = ({ icon: Icon = DotSmallIcon, showIcon = true, label, description, status = "complete", isLast = false, children, className, }: ThinkingStepProps) => { if (status === "pending") { return null; } const isActive = status === "active"; return ( // Outer animates height so space opens smoothly as steps stream in. {/* Inner fades content in once the space starts opening. */}

{/* Marker column with continuous connector line. */}

{showIcon ? ( ) : (

)}

{!isLast &&

}

{isActive ? ( {label}… ) : ( {label} )} {description && ( {description} )} {children}

); }; // ─── ThinkingStepDetails (nested accordion) ───────────────────────────────── interface ThinkingStepDetailsProps { summary: string; details?: string[]; defaultOpen?: boolean; children?: React.ReactNode; className?: string; } const ThinkingStepDetails = ({ summary, details, defaultOpen = false, children, className, }: ThinkingStepDetailsProps) => (

{summary}

{details?.map((item) => ( {item} ))} {children}

); // ─── ThinkingStepSources ──────────────────────────────────────────────────── const ThinkingStepSources = ({ children, className, ...props }: React.ComponentProps<"div">) => (

{children}

); // ─── ThinkingStepSource ───────────────────────────────────────────────────── type SourceColor = "gray" | "blue" | "green" | "yellow" | "red"; const SOURCE_VARIANT: Record["variant"]> = { blue: "default", gray: "secondary", green: "success", red: "destructive", yellow: "warning", }; interface ThinkingStepSourceProps { color?: SourceColor; delay?: number; children: React.ReactNode; className?: string; } const ThinkingStepSource = ({ color = "gray", delay = 0, children, className, }: ThinkingStepSourceProps) => ( {children} ); // ─── ThinkingStepImage ────────────────────────────────────────────────────── interface ThinkingStepImageProps { src: string; alt?: string; caption?: string; delay?: number; className?: string; } const ThinkingStepImage = ({ src, alt = "", caption, delay = 0, className, }: ThinkingStepImageProps) => ( {/* eslint-disable-next-line next/no-img-element -- caller-supplied source, may be a data/blob URL */} {alt}

{caption && {caption}} ); export { ThinkingSteps, ThinkingStepsHeader, ThinkingStepsContent, ThinkingStep, ThinkingStepDetails, ThinkingStepSources, ThinkingStepSource, ThinkingStepImage, }; export type { ThinkingStepsProps, ThinkingStepProps, ThinkingStepDetailsProps, ThinkingStepSourceProps, ThinkingStepImageProps, StepStatus, SourceColor, }; 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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@blode","registryDependencies":["accordion","badge"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/thinking-steps.tsx","content":"$53","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]