Thinking Steps

1"use client";
2 
3import {
4  useState,
5  useEffect,
6  useLayoutEffect,
7  useRef,
8  useCallback,
9  useContext,
10  createContext,
11  forwardRef,
12  type ReactNode,
13  type HTMLAttributes,
14} from "react";
15import { motion, AnimatePresence } from "framer-motion";
16import * as Collapsible from "@radix-ui/react-collapsible";
17 
18// SSR-safe layout effect (client components still server-render in Next).
19const useIsoLayoutEffect =
20  typeof window !== "undefined" ? useLayoutEffect : useEffect;
21import { cn } from "@/lib/utils";
22import { useIcon } from "@/lib/icon-context";
23import type { IconName } from "@/lib/icon-context";
24import { spring } from "@/lib/springs";
25import { fontWeights } from "@/lib/font-weight";
26import { useShape } from "@/lib/shape-context";
27import { Badge } from "@/registry/default/badge";
28import type { BadgeColor } from "@/registry/default/badge";
29 
30// ─── Shared collapsible parts ───────────────────────────────────────────────
31//
32// ThinkingSteps and ThinkingStepDetails are both single collapsible sections,
33// built directly on Radix's Collapsible (Root/Trigger/Content) with the
34// library's framer-motion springs layered on top.
35 
36/** Open state of the nearest ThinkingSteps root, for the header trigger/panel. */
37const ThinkingStepsOpenContext = createContext(false);
38 
39interface TriggerRowProps extends HTMLAttributes<HTMLButtonElement> {
40  open: boolean;
41  children: ReactNode;
42}
43 
44/**
45 * Trigger row: hover background, dual-layer variable-weight label, and a
46 * chevron that rotates from right (closed) to down (open). Mirrors the
47 * library's accordion trigger styling.
48 */
49const TriggerRow = forwardRef<HTMLButtonElement, TriggerRowProps>(
50  ({ open, children, className, ...props }, ref) => {
51    const ChevronRight = useIcon("chevron-right");
52    const shape = useShape();
53    const [isHovered, setIsHovered] = useState(false);
54    const highlighted = open || isHovered;
55 
56    return (
57      <div
58        className="relative w-fit"
59        onMouseEnter={() => setIsHovered(true)}
60        onMouseLeave={() => setIsHovered(false)}
61      >
62        <AnimatePresence>
63          {isHovered && (
64            <motion.div
65              className={`absolute inset-0 ${shape.bg} bg-hover pointer-events-none`}
66              initial={{ opacity: 0 }}
67              animate={{ opacity: 1 }}
68              exit={{ opacity: 0, transition: spring.fast.exit }}
69// … truncated