sparkdesign 0.3.1 → 0.3.3

package/cli/registry/chat/{reasoning-step.tsx → reasoning-step/compound.tsx}

@@ -1,37 +1,18 @@
-import { useState, useMemo, useCallback, memo, Fragment } from 'react'
+import { memo, useMemo, useCallback, Fragment } from 'react'
 import type { ReactNode } from 'react'
 import { motion } from 'framer-motion'
-import { cn } from '@/lib/utils'
-import { EyeLine, ArrowRightLine } from '../basic/icons-inline'
-
-export type ReasoningStepDetail =
-  | { type: 'action'; action: string; desc?: string; details?: ReasoningStepDetail[] }
-  | {
-      type: 'file'
-      filename: string
-      lines?: string
-      path?: string
-      fileType?: string
-      details?: ReasoningStepDetail[]
-    }
+import { cn } from '../../lib/utils'
+import { useReasoningStepContext } from './context'
+import type {
+  ReasoningStepHeaderProps,
+  ReasoningStepDetailsProps,
+  ReasoningStepDetailRowProps,
+  ReasoningStepDetail,
+} from './types'
 
-export interface ReasoningStepProps {
-  text: ReactNode
-  description?: string
-  status?: 'completed' | 'in-progress'
-  icon?: ReactNode
-  showIcon?: boolean
-  details?: ReasoningStepDetail[]
-  children?: ReactNode
-  duration?: number
-  spread?: number
-  disableExpandAnimation?: boolean
-  defaultExpanded?: boolean
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-  eyeIcon?: ReactNode
-  arrowRightIcon?: ReactNode
-}
+// ===== 样式常量 =====
+
+const iconSizeStyle = { width: 'var(--font-size-xs)', height: 'var(--font-size-xs)' }
 
 const FILE_ICON_COLOR_MAP: Record<string, string> = {
   ts: 'text-info', tsx: 'text-info', js: 'text-info', jsx: 'text-info',
@@ -44,10 +25,7 @@ function getFileIconColorClass(fileType?: string, filename?: string): string {
   return FILE_ICON_COLOR_MAP[ext] ?? 'text-text-tertiary'
 }
 
-/* 与主文 text-xs 共用 token，图标与文字同尺度、随 data-style 一致缩放 */
-const iconSizeStyle = { width: 'var(--font-size-xs)', height: 'var(--font-size-xs)' }
-const eyeClass = 'w-full h-full text-text-tertiary transition-transform duration-200 ease-in-out'
-const arrowClass = 'w-full h-full transition-transform duration-200 ease-in-out'
+// ===== 辅助组件 =====
 
 const FileIconPlaceholder = memo(function FileIconPlaceholder({ className }: { className?: string }) {
   return (
@@ -87,7 +65,86 @@ const InlineRow = memo(function InlineRow({
   )
 })
 
-interface DetailRowProps {
+// ===== ReasoningStep.Header =====
+
+export function ReasoningStepHeader({ className }: ReasoningStepHeaderProps) {
+  const ctx = useReasoningStepContext()
+
+  const dynamicSpread = useMemo(() => {
+    if (typeof ctx.text === 'string') return ctx.text.length * ctx.spread
+    return 10 * ctx.spread
+  }, [ctx.text, ctx.spread])
+
+  const getIcon = () => (ctx.icon ? ctx.icon : ctx.eyeIcon)
+
+  const renderPrimaryText = () => {
+    if (typeof ctx.text !== 'string') return ctx.text
+    if (ctx.status === 'in-progress') {
+      return (
+        <motion.span
+          className="text-xs leading-xs font-normal relative inline-block bg-clip-text text-transparent bg-[length:250%_100%,auto] bg-no-repeat truncate"
+          style={{
+            backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), var(--color-text), transparent calc(50% + ${dynamicSpread}px)), linear-gradient(var(--color-text-tertiary), var(--color-text-tertiary))`,
+          }}
+          initial={{ backgroundPosition: '100% center' }}
+          animate={{ backgroundPosition: '0% center' }}
+          transition={{ repeat: Infinity, duration: ctx.duration, ease: 'linear' }}
+        >
+          {ctx.text}
+        </motion.span>
+      )
+    }
+    return (
+      <span className="text-xs leading-xs font-normal text-text-tertiary truncate">
+        {ctx.text}
+      </span>
+    )
+  }
+
+  const renderDescription = () => {
+    if (!ctx.description) return null
+    return (
+      <span className="text-xs leading-xs font-normal text-text-quaternary truncate">
+        {ctx.description}
+      </span>
+    )
+  }
+
+  return (
+    <div
+      className={cn('flex flex-row items-center gap-1.5', ctx.hasExpandableContent && 'cursor-pointer', className)}
+      onClick={ctx.toggleExpanded}
+    >
+      {ctx.effectiveShowIcon && (
+        <div className="flex items-center justify-center shrink-0" style={iconSizeStyle}>
+          {getIcon()}
+        </div>
+      )}
+      <div className="flex flex-row items-center gap-1 flex-1 min-w-0">
+        {renderPrimaryText()}
+        {ctx.description ? renderDescription() : null}
+        {ctx.hasExpandableContent && (
+          <div
+            className={cn(
+              'flex items-center justify-center shrink-0 text-text-tertiary transition-opacity duration-200 ease-in-out',
+              ctx.effectiveExpanded ? 'opacity-100' : ctx.isHovered ? 'opacity-100' : 'opacity-0',
+              ctx.effectiveExpanded ? 'rotate-90' : 'rotate-0'
+            )}
+            style={iconSizeStyle}
+          >
+            {ctx.arrowRightIcon}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+ReasoningStepHeader.displayName = 'ReasoningStepHeader'
+
+// ===== ReasoningStep.DetailRow（内部递归组件）=====
+
+interface DetailRowInternalProps {
   detail: ReasoningStepDetail
   depth: number
   pathKey: string
@@ -98,16 +155,15 @@ interface DetailRowProps {
   arrowRightIcon: ReactNode
 }
 
-const DetailRow = memo(function DetailRow({
+const DetailRowInternal = memo(function DetailRowInternal({
   detail,
   depth,
   pathKey,
   detailIndent,
-  disableExpandAnimation,
   expandedNestedKeys,
   onToggleNested,
   arrowRightIcon,
-}: DetailRowProps) {
+}: DetailRowInternalProps) {
   const hasNested = detail.details != null && detail.details.length > 0
   const isExpandedNested = expandedNestedKeys.has(pathKey)
   const showIconOnRow = !hasNested
@@ -175,13 +231,13 @@ const DetailRow = memo(function DetailRow({
         <div className="overflow-hidden">
           <div className={cn(nestedWrapperClass)}>
             {detail.details?.map((d, i) => (
-              <DetailRow
+              <DetailRowInternal
                 key={`${pathKey}-${i}`}
                 detail={d}
                 depth={depth + 1}
                 pathKey={`${pathKey}-${i}`}
                 detailIndent={detailIndent}
-                disableExpandAnimation={disableExpandAnimation}
+                disableExpandAnimation={false}
                 expandedNestedKeys={expandedNestedKeys}
                 onToggleNested={onToggleNested}
                 arrowRightIcon={arrowRightIcon}
@@ -194,165 +250,87 @@ const DetailRow = memo(function DetailRow({
   )
 })
 
-export function ReasoningStep({
-  text,
-  description,
-  status = 'completed',
-  icon,
-  showIcon = true,
-  details,
-  children,
-  duration = 2,
-  spread = 2,
-  disableExpandAnimation = false,
-  defaultExpanded,
-  expanded: expandedProp,
-  onExpandedChange,
-  eyeIcon,
-  arrowRightIcon,
-}: ReasoningStepProps) {
-  const isControlled = expandedProp !== undefined
-  const [isExpandedInternal, setIsExpandedInternal] = useState(defaultExpanded ?? false)
-  const isExpanded = isControlled ? expandedProp : isExpandedInternal
-  const [isHovered, setIsHovered] = useState(false)
-
-  const effectiveExpanded = disableExpandAnimation && defaultExpanded !== undefined
-    ? defaultExpanded
-    : isExpanded
+// ===== ReasoningStep.DetailRow（公开 API）=====
 
-  const effectiveShowIcon = showIcon && typeof text === 'string'
+export function ReasoningStepDetailRow({
+  detail,
+  depth = 0,
+  pathKey = '0',
+}: ReasoningStepDetailRowProps) {
+  const ctx = useReasoningStepContext()
+  return (
+    <DetailRowInternal
+      detail={detail}
+      depth={depth}
+      pathKey={pathKey}
+      detailIndent={ctx.detailIndent}
+      disableExpandAnimation={ctx.disableExpandAnimation}
+      expandedNestedKeys={ctx.expandedNestedKeys}
+      onToggleNested={ctx.toggleNested}
+      arrowRightIcon={ctx.arrowRightIcon}
+    />
+  )
+}
 
-  const detailIndent = effectiveShowIcon ? 'var(--spacing-1.5)' : 'var(--spacing-2.5)'
+ReasoningStepDetailRow.displayName = 'ReasoningStepDetailRow'
 
-  const dynamicSpread = useMemo(() => {
-    if (typeof text === 'string') return text.length * spread
-    return 10 * spread
-  }, [text, spread])
+// ===== ReasoningStep.Details =====
 
-  const defaultEye = eyeIcon ?? <EyeLine className={eyeClass} />
-  const defaultArrow = arrowRightIcon ?? <ArrowRightLine className={arrowClass} />
+export function ReasoningStepDetails({ className, children }: ReasoningStepDetailsProps) {
+  const ctx = useReasoningStepContext()
+  const hasDetails = ctx.details != null && ctx.details.length > 0
 
-  const getIcon = () => (icon ? icon : defaultEye)
+  return (
+    <div
+      className={cn(
+        'grid transition-[grid-template-rows,opacity] duration-200 ease-out',
+        ctx.effectiveExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+        className
+      )}
+    >
+      <div className="overflow-hidden">
+        {hasDetails ? (
+          <div className="flex flex-col">
+            {ctx.details?.map((d, i) => (
+              <DetailRowInternal
+                key={String(i)}
+                detail={d}
+                depth={0}
+                pathKey={String(i)}
+                detailIndent={ctx.detailIndent}
+                disableExpandAnimation={ctx.disableExpandAnimation}
+                expandedNestedKeys={ctx.expandedNestedKeys}
+                onToggleNested={ctx.toggleNested}
+                arrowRightIcon={ctx.arrowRightIcon}
+              />
+            ))}
+          </div>
+        ) : (
+          children ?? ctx.detailsChildren
+        )}
+      </div>
+    </div>
+  )
+}
 
-  const renderPrimaryText = () => {
-    if (typeof text !== 'string') return text
-    if (status === 'in-progress') {
-      return (
-        <motion.span
-          className="text-xs leading-xs font-normal relative inline-block bg-clip-text text-transparent bg-[length:250%_100%,auto] bg-no-repeat truncate"
-          style={{
-            backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), var(--color-text), transparent calc(50% + ${dynamicSpread}px)), linear-gradient(var(--color-text-tertiary), var(--color-text-tertiary))`,
-          }}
-          initial={{ backgroundPosition: '100% center' }}
-          animate={{ backgroundPosition: '0% center' }}
-          transition={{ repeat: Infinity, duration, ease: 'linear' }}
-        >
-          {text}
-        </motion.span>
-      )
-    }
-    return (
-      <span className="text-xs leading-xs font-normal text-text-tertiary truncate">
-        {text}
-      </span>
-    )
-  }
+ReasoningStepDetails.displayName = 'ReasoningStepDetails'
 
-  const renderDescription = () => {
-    if (!description) return null
-    return (
-      <span className="text-xs leading-xs font-normal text-text-quaternary truncate">
-        {description}
-      </span>
-    )
-  }
+// ===== ReasoningStep.DefaultLayout =====
 
-  const [expandedNestedKeys, setExpandedNestedKeys] = useState<Set<string>>(new Set())
-  const toggleNested = useCallback((pathKey: string) => {
-    setExpandedNestedKeys((prev) => {
-      const next = new Set(prev)
-      if (next.has(pathKey)) next.delete(pathKey)
-      else next.add(pathKey)
-      return next
-    })
-  }, [])
-
-  const hasDetails = details != null && details.length > 0
-  const hasExpandableContent = hasDetails || children != null
-
-  const handleToggle = () => {
-    if (hasExpandableContent) {
-      if (isControlled) onExpandedChange?.(!expandedProp)
-      else setIsExpandedInternal((e) => !e)
-    }
-  }
+export function ReasoningStepDefaultLayout() {
+  const ctx = useReasoningStepContext()
 
   return (
     <div
       data-reasoning-step
       className="flex flex-col gap-1 py-0.5"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={() => ctx.setIsHovered(true)}
+      onMouseLeave={() => ctx.setIsHovered(false)}
     >
-      <div
-        className={cn('flex flex-row items-center gap-1.5', hasExpandableContent && 'cursor-pointer')}
-        onClick={handleToggle}
-      >
-        {effectiveShowIcon && (
-          <div className="flex items-center justify-center shrink-0" style={iconSizeStyle}>
-            {getIcon()}
-          </div>
-        )}
-        <div className="flex flex-row items-center gap-1 flex-1 min-w-0">
-          {renderPrimaryText()}
-          {description ? renderDescription() : null}
-          {hasExpandableContent && (
-          <div
-            className={cn(
-              'flex items-center justify-center shrink-0 text-text-tertiary transition-opacity duration-200 ease-in-out',
-              effectiveExpanded ? 'opacity-100' : isHovered ? 'opacity-100' : 'opacity-0',
-              effectiveExpanded ? 'rotate-90' : 'rotate-0'
-            )}
-            style={iconSizeStyle}
-          >
-            {defaultArrow}
-          </div>
-          )}
-        </div>
-      </div>
-
-      {hasExpandableContent && (
-        <div
-          className={cn(
-            'grid transition-[grid-template-rows,opacity] duration-200 ease-out',
-            effectiveExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
-          )}
-        >
-          <div className="overflow-hidden">
-            {hasDetails ? (
-              <div className="flex flex-col">
-                {details?.map((d, i) => (
-                  <DetailRow
-                    key={String(i)}
-                    detail={d}
-                    depth={0}
-                    pathKey={String(i)}
-                    detailIndent={detailIndent}
-                    disableExpandAnimation={disableExpandAnimation}
-                    expandedNestedKeys={expandedNestedKeys}
-                    onToggleNested={toggleNested}
-                    arrowRightIcon={defaultArrow}
-                  />
-                ))}
-              </div>
-            ) : (
-              children
-            )}
-          </div>
-        </div>
-      )}
+      <ReasoningStepHeader />
+      {ctx.hasExpandableContent && <ReasoningStepDetails />}
     </div>
   )
 }
 
-ReasoningStep.displayName = 'ReasoningStep'
+ReasoningStepDefaultLayout.displayName = 'ReasoningStepDefaultLayout'

package/cli/registry/chat/reasoning-step/context.tsx

@@ -0,0 +1,114 @@
+import { createContext, useContext, useState, useCallback, useMemo } from 'react'
+import type { ReactNode } from 'react'
+import { EyeLine, ArrowRightLine } from '../../basic/icons-inline'
+import type { ReasoningStepContextValue, ReasoningStepRootProps } from './types'
+
+// ===== 样式常量 =====
+
+const eyeClass = 'w-full h-full text-text-tertiary transition-transform duration-200 ease-in-out'
+const arrowClass = 'w-full h-full transition-transform duration-200 ease-in-out'
+
+// ===== Context =====
+
+const ReasoningStepContext = createContext<ReasoningStepContextValue | null>(null)
+ReasoningStepContext.displayName = 'ReasoningStepContext'
+
+export function useReasoningStepContext() {
+  const ctx = useContext(ReasoningStepContext)
+  if (!ctx) throw new Error('ReasoningStep compound components must be used within ReasoningStep.Root')
+  return ctx
+}
+
+// ===== Provider =====
+
+export function ReasoningStepRootProvider({
+  text,
+  description,
+  status = 'completed',
+  icon,
+  showIcon = true,
+  details,
+  children,
+  detailsChildren,
+  duration = 2,
+  spread = 2,
+  disableExpandAnimation = false,
+  defaultExpanded,
+  expanded: expandedProp,
+  onExpandedChange,
+  eyeIcon,
+  arrowRightIcon,
+}: ReasoningStepRootProps & { children?: ReactNode; detailsChildren?: ReactNode }) {
+  const isControlled = expandedProp !== undefined
+  const [isExpandedInternal, setIsExpandedInternal] = useState(defaultExpanded ?? false)
+  const isExpanded = isControlled ? expandedProp : isExpandedInternal
+  const [isHovered, setIsHovered] = useState(false)
+
+  const effectiveExpanded = disableExpandAnimation && defaultExpanded !== undefined
+    ? defaultExpanded
+    : isExpanded
+
+  const effectiveShowIcon = showIcon && typeof text === 'string'
+  const detailIndent = effectiveShowIcon ? 'var(--spacing-1.5)' : 'var(--spacing-2.5)'
+
+  const hasDetails = details != null && details.length > 0
+  const hasExpandableContent = hasDetails || detailsChildren != null
+
+  const toggleExpanded = useCallback(() => {
+    if (hasExpandableContent) {
+      if (isControlled) onExpandedChange?.(!expandedProp)
+      else setIsExpandedInternal((e) => !e)
+    }
+  }, [hasExpandableContent, isControlled, expandedProp, onExpandedChange])
+
+  const [expandedNestedKeys, setExpandedNestedKeys] = useState<Set<string>>(new Set())
+  const toggleNested = useCallback((pathKey: string) => {
+    setExpandedNestedKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(pathKey)) next.delete(pathKey)
+      else next.add(pathKey)
+      return next
+    })
+  }, [])
+
+  const defaultEye = useMemo(
+    () => eyeIcon ?? <EyeLine className={eyeClass} />,
+    [eyeIcon]
+  )
+  const defaultArrow = useMemo(
+    () => arrowRightIcon ?? <ArrowRightLine className={arrowClass} />,
+    [arrowRightIcon]
+  )
+
+  const ctxValue: ReasoningStepContextValue = {
+    status,
+    isExpanded,
+    isHovered,
+    setIsHovered,
+    toggleExpanded,
+    effectiveExpanded,
+    effectiveShowIcon,
+    hasExpandableContent,
+    text,
+    description,
+    details,
+    detailsChildren,
+    duration,
+    spread,
+    disableExpandAnimation,
+    detailIndent,
+    expandedNestedKeys,
+    toggleNested,
+    icon,
+    eyeIcon: defaultEye,
+    arrowRightIcon: defaultArrow,
+  }
+
+  return (
+    <ReasoningStepContext.Provider value={ctxValue}>
+      {children}
+    </ReasoningStepContext.Provider>
+  )
+}
+
+ReasoningStepRootProvider.displayName = 'ReasoningStepRoot'

package/cli/registry/chat/reasoning-step/index.tsx

@@ -0,0 +1,45 @@
+import { ReasoningStepRootProvider, useReasoningStepContext } from './context'
+import {
+  ReasoningStepHeader,
+  ReasoningStepDetails,
+  ReasoningStepDetailRow,
+  ReasoningStepDefaultLayout,
+} from './compound'
+import type {
+  ReasoningStepProps,
+  ReasoningStepCompound,
+  ReasoningStepDetail,
+  ReasoningStepStatus,
+} from './types'
+
+// ===== ReasoningStep 便捷组件 =====
+
+function ReasoningStepBase(props: ReasoningStepProps) {
+  return (
+    <ReasoningStepRootProvider {...props}>
+      <ReasoningStepDefaultLayout />
+    </ReasoningStepRootProvider>
+  )
+}
+
+ReasoningStepBase.displayName = 'ReasoningStep'
+
+// ===== 挂载复合组件 =====
+
+type ReasoningStepBaseType = React.FC<ReasoningStepProps> & Partial<ReasoningStepCompound>
+
+const ReasoningStepWithSlots = ReasoningStepBase as ReasoningStepBaseType
+
+ReasoningStepWithSlots.Root = ReasoningStepRootProvider
+ReasoningStepWithSlots.Header = ReasoningStepHeader
+ReasoningStepWithSlots.Details = ReasoningStepDetails
+ReasoningStepWithSlots.DetailRow = ReasoningStepDetailRow
+
+export const ReasoningStep = ReasoningStepWithSlots as React.FC<ReasoningStepProps> &
+  ReasoningStepCompound
+
+// ===== 导出类型和工具 =====
+
+export type { ReasoningStepProps, ReasoningStepDetail, ReasoningStepStatus }
+
+export { useReasoningStepContext }

package/cli/registry/chat/reasoning-step/types.ts

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react'
+
+// ===== 基础类型 =====
+
+export type ReasoningStepDetail =
+  | { type: 'action'; action: string; desc?: string; details?: ReasoningStepDetail[] }
+  | {
+      type: 'file'
+      filename: string
+      lines?: string
+      path?: string
+      fileType?: string
+      details?: ReasoningStepDetail[]
+    }
+
+export type ReasoningStepStatus = 'completed' | 'in-progress'
+
+// ===== 组件 Props =====
+
+export interface ReasoningStepRootProps {
+  /** 主文本 */
+  text: ReactNode
+  /** 描述文本 */
+  description?: string
+  /** 状态 */
+  status?: ReasoningStepStatus
+  /** 自定义图标 */
+  icon?: ReactNode
+  /** 是否显示图标 */
+  showIcon?: boolean
+  /** 详情数据 */
+  details?: ReasoningStepDetail[]
+  /** 子组件 */
+  children?: ReactNode
+  /** 动画持续时间 */
+  duration?: number
+  /** 动画扩散度 */
+  spread?: number
+  /** 禁用展开动画 */
+  disableExpandAnimation?: boolean
+  /** 默认展开 */
+  defaultExpanded?: boolean
+  /** 受控展开状态 */
+  expanded?: boolean
+  /** 展开状态变化回调 */
+  onExpandedChange?: (expanded: boolean) => void
+  /** 自定义眼睛图标 */
+  eyeIcon?: ReactNode
+  /** 自定义箭头图标 */
+  arrowRightIcon?: ReactNode
+}
+
+export type ReasoningStepProps = ReasoningStepRootProps
+
+export interface ReasoningStepHeaderProps {
+  className?: string
+}
+
+export interface ReasoningStepDetailsProps {
+  className?: string
+  children?: ReactNode
+}
+
+export interface ReasoningStepDetailRowProps {
+  detail: ReasoningStepDetail
+  depth?: number
+  pathKey?: string
+  className?: string
+}
+
+// ===== Context 类型 =====
+
+export interface ReasoningStepContextValue {
+  // 状态
+  status: ReasoningStepStatus
+  isExpanded: boolean
+  isHovered: boolean
+  setIsHovered: (hovered: boolean) => void
+  toggleExpanded: () => void
+  effectiveExpanded: boolean
+  effectiveShowIcon: boolean
+  hasExpandableContent: boolean
+  // 数据
+  text: ReactNode
+  description?: string
+  details?: ReasoningStepDetail[]
+  detailsChildren?: ReactNode
+  // 配置
+  duration: number
+  spread: number
+  disableExpandAnimation: boolean
+  detailIndent: string
+  // 嵌套状态
+  expandedNestedKeys: Set<string>
+  toggleNested: (pathKey: string) => void
+  // 图标
+  icon?: ReactNode
+  eyeIcon: ReactNode
+  arrowRightIcon: ReactNode
+}
+
+// ===== 复合组件类型 =====
+
+export interface ReasoningStepCompound {
+  Root: React.FC<ReasoningStepRootProps>
+  Header: React.FC<ReasoningStepHeaderProps>
+  Details: React.FC<ReasoningStepDetailsProps>
+  DetailRow: React.FC<ReasoningStepDetailRowProps>
+}