55: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"] 56:T531e,"use client"; import { useState, useEffect, useLayoutEffect, useRef, useCallback, useContext, createContext, forwardRef, type ReactNode, type HTMLAttributes, } from "react"; import { motion, AnimatePresence } from "framer-motion"; import * as Collapsible from "@radix-ui/react-collapsible"; // SSR-safe layout effect (client components still server-render in Next). const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; import { cn } from "@/lib/utils"; import { useIcon } from "@/lib/icon-context"; import type { IconName } from "@/lib/icon-context"; import { spring } from "@/lib/springs"; import { fontWeights } from "@/lib/font-weight"; import { useShape } from "@/lib/shape-context"; import { SizeProvider, useSize, type SizeVariant } from "@/lib/size-context"; import { Badge } from "@/registry/default/badge"; import type { BadgeColor } from "@/registry/default/badge"; // ─── Shared collapsible parts ─────────────────────────────────────────────── // // ThinkingSteps and ThinkingStepDetails are both single collapsible sections, // built directly on Radix's Collapsible (Root/Trigger/Content) with the // library's framer-motion springs layered on top. /** Open state of the nearest ThinkingSteps root, for the header trigger/panel. */ const ThinkingStepsOpenContext = createContext(false); interface TriggerRowProps extends HTMLAttributes { open: boolean; children: ReactNode; } /** * Trigger row: hover background, dual-layer variable-weight label, and a * chevron that rotates from right (closed) to down (open). Mirrors the * library's accordion trigger styling. */ const TriggerRow = forwardRef( ({ open, children, className, ...props }, ref) => { const ChevronRight = useIcon("chevron-right"); const shape = useShape(); const sizeClasses = useSize(); const [isHovered, setIsHovered] = useState(false); const highlighted = open || isHovered; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {isHovered && ( )} {/* Radix's Trigger renders the same

); } ); TriggerRow.displayName = "ThinkingStepsTriggerRow"; interface CollapsePanelProps { open: boolean; children: ReactNode; } /** * Collapsible panel with a framer-motion height + spring animation. * * Radix's Content would apply `hidden` the moment a collapsible closes (it * can't observe the JS-driven exit animation), which is `display: none` and * would freeze the exit mid-flight. With `forceMount` the element stays * mounted and Radix's internal `hidden: !isOpen` is always false (Presence * reports the content as permanently present), so the attribute is entirely * ours to manage: we apply it only once the framer exit has actually * completed. `asChild` keeps our own div as the rendered element, and the * persistent panel keeps the trigger ↔ panel ARIA contract intact (the * trigger's `aria-controls` id lives on it). */ function CollapsePanel({ open, children }: CollapsePanelProps) { const compactStep = useSize().variant === "compact"; // The open height is animated to a self-measured LAYOUT pixel value, not // `height: "auto"`: framer resolves an "auto" target by measuring the // element's *visual* (transformed) size, so under a scaled ancestor // (e.g. /demo's 1.7x card) the animation overshoots to scale× the real // height and snaps back when the final "auto" lands. offsetHeight and // ResizeObserver are transform-immune. Same setup as the accordions. const innerRef = useRef(null); const roRef = useRef(null); const [contentHeight, setContentHeight] = useState(null); // Panels open at mount render `initial: "auto"` and receive their first // pixel target a commit later; that hand-off must SNAP (duration 0), not // spring. Panels that open later spring normally. const needsSnap = useRef(open); const measureRef = useCallback((el: HTMLDivElement | null) => { roRef.current?.disconnect(); roRef.current = null; innerRef.current = el; if (!el) return; if (el.offsetHeight > 0) setContentHeight(el.offsetHeight); const ro = new ResizeObserver(() => { // Ignore the 0 that fires while the panel is display:none. if (el.offsetHeight > 0) setContentHeight(el.offsetHeight); }); ro.observe(el); roRef.current = ro; }, []); // Re-measure synchronously (pre-paint) when opening, so the spring's // target is the fresh layout height from its first frame. useIsoLayoutEffect(() => { if (open && innerRef.current && innerRef.current.offsetHeight > 0) { setContentHeight(innerRef.current.offsetHeight); } }, [open]); useEffect(() => { if (contentHeight !== null) needsSnap.current = false; }, [contentHeight]); const [exitComplete, setExitComplete] = useState(!open); if (open && exitComplete) { // Reset during render so the panel is un-hidden before the opening // animation's first paint. setExitComplete(false); } return ( // Radix's --radix-collapsible-content-height/width vars are measured // from getBoundingClientRect (visual size) and are unused here — the // spring targets our own transform-immune measurement instead. ); } // ─── ThinkingSteps (root) ─────────────────────────────────────────────────── interface ThinkingStepsProps extends HTMLAttributes { /** Step on the size ladder. Wins over the surrounding SizeProvider and * propagates to every row inside. */ size?: SizeVariant; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; children: ReactNode; } const ThinkingSteps = forwardRef( ({ size, defaultOpen = true, open, onOpenChange, children, className, ...props }, ref) => { // Always drive Radix as controlled so the header/panel can read the // open state (chevron rotation, framer enter/exit) from context. const [internalOpen, setInternalOpen] = useState(defaultOpen); const isOpen = open ?? internalOpen; const root = ( { if (open === undefined) setInternalOpen(next); onOpenChange?.(next); }} className={cn("w-80 max-w-full", className)} {...props} > {children} ); // A size prop pins every row inside to one ladder step. return size ? {root} : root; } ); ThinkingSteps.displayName = "ThinkingSteps"; // ─── ThinkingStepsHeader ──────────────────────────────────────────────────── interface ThinkingStepsHeaderProps extends HTMLAttributes { children?: ReactNode; } const ThinkingStepsHeader = forwardRef< HTMLButtonElement, ThinkingStepsHeaderProps >(({ children = "Thinking", className, ...props }, ref) => { const isOpen = useContext(ThinkingStepsOpenContext); return ( {children} ); }); ThinkingStepsHeader.displayName = "ThinkingStepsHeader"; // ─── ThinkingStepsContent ─────────────────────────────────────────────────── interface ThinkingStepsContentProps extends HTMLAttributes { children: ReactNode; } const ThinkingStepsContent = forwardRef< HTMLDivElement, ThinkingStepsContentProps >(({ children, className, ...props }, ref) => { const isOpen = useContext(ThinkingStepsOpenContext); return (

{children}

); }); ThinkingStepsContent.displayName = "ThinkingStepsContent"; // ─── ThinkingStep ─────────────────────────────────────────────────────────── type StepStatus = "complete" | "active" | "pending"; interface ThinkingStepProps { icon?: IconName; showIcon?: boolean; label: string; description?: string; status?: StepStatus; delay?: number; isLast?: boolean; children?: ReactNode; className?: string; } /** Measured layout height for a step's opening animation. `height: "auto"` * is resolved by framer from the element's *visual* (transformed) size, so * under a scaled ancestor (the /demo card) every step springs out to scale x * its real height and snaps back when "auto" lands — the whole list visibly * overshoots as it builds. offsetHeight and ResizeObserver are * transform-immune. Same setup as CollapsePanel above. */ function useStepHeight() { const roRef = useRef(null); const [height, setHeight] = useState(null); const ref = useCallback((el: HTMLDivElement | null) => { roRef.current?.disconnect(); roRef.current = null; if (!el) return; const sync = () => { if (el.offsetHeight > 0) setHeight(el.offsetHeight); }; sync(); const ro = new ResizeObserver(sync); ro.observe(el); roRef.current = ro; }, []); return [ref, height] as const; } function ThinkingStep({ icon = "dot", showIcon = true, label, description, status = "complete", delay = 0.08, isLast = false, children, className, }: ThinkingStepProps) { const Icon = useIcon(icon); const shape = useShape(); const sizeClasses = useSize(); const [stepRef, stepHeight] = useStepHeight(); if (status === "pending") return null; const isActive = status === "active"; return ( /* Outer: animates height to create space smoothly */ {/* Inner: fades content in after space starts opening — and is the element measured for the height above. */} {/* Content row — this is the fluid hover target */}

{/* Icon column with continuous connector line */}

{showIcon ? ( ) : (

)}

{/* Line stretches from icon to bottom of this step */} {!isLast && (

)}

{/* Text content */}

{label} {isActive && "…"} {description && ( {description} )} {children}

); } // ─── ThinkingStepDetails (nested collapsible) ─────────────────────────────── interface ThinkingStepDetailsProps { summary: string; details?: string[]; defaultOpen?: boolean; children?: ReactNode; className?: string; } function ThinkingStepDetails({ summary, details, defaultOpen = false, children, className, }: ThinkingStepDetailsProps) { const compactStep = useSize().variant === "compact"; const [open, setOpen] = useState(defaultOpen); return ( {summary}

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

); } // ─── ThinkingStepSources ──────────────────────────────────────────────────── interface ThinkingStepSourcesProps extends HTMLAttributes { children: ReactNode; } const ThinkingStepSources = forwardRef( ({ children, className, ...props }, ref) => { return (

{children}

); } ); ThinkingStepSources.displayName = "ThinkingStepSources"; // ─── ThinkingStepSource ───────────────────────────────────────────────────── interface ThinkingStepSourceProps { color?: BadgeColor; delay?: number; children: ReactNode; className?: string; } function ThinkingStepSource({ color = "gray", delay = 0, children, className }: ThinkingStepSourceProps) { return ( {children} ); } ThinkingStepSource.displayName = "ThinkingStepSource"; // ─── ThinkingStepImage ────────────────────────────────────────────────────── interface ThinkingStepImageProps { src: string; alt?: string; caption?: string; delay?: number; className?: string; } function ThinkingStepImage({ src, alt = "", caption, delay = 0, className }: ThinkingStepImageProps) { const shape = useShape(); // The caption role of the type scale — see /docs/sizes. const compact = useSize().variant === "compact"; return ( {/* Screenshots often end in white; an inset neutral hairline keeps the edge visible without changing the measured image or panel height. */} {alt}

{caption && ( {caption} )} ); } ThinkingStepImage.displayName = "ThinkingStepImage"; // ─── Exports ──────────────────────────────────────────────────────────────── export { ThinkingSteps, ThinkingStepsHeader, ThinkingStepsContent, ThinkingStep, ThinkingStepDetails, ThinkingStepSources, ThinkingStepSource, ThinkingStepImage, }; export type { ThinkingStepsProps, ThinkingStepsHeaderProps, ThinkingStepsContentProps, ThinkingStepProps, ThinkingStepDetailsProps, ThinkingStepSourcesProps, ThinkingStepSourceProps, ThinkingStepImageProps, StepStatus, }; 54:["$","$L55",null,{"files":[{"path":"registry/radix/thinking-steps.tsx","content":"$56","type":"registry:ui","target":"components/ui/thinking-steps.tsx"}],"className":"h-[70svh] min-h-80"}]