sparkdesign 0.0.1 → 0.2.6

package/cli/registry/chat/user-question/types.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react'
+
+/** 单个问题的选项 */
+export interface UserQuestionOption {
+  label: string
+  description?: string
+}
+
+/** 单个问题 */
+export interface UserQuestionItem {
+  question: string
+  header?: string
+  options: UserQuestionOption[]
+  multiSelect?: boolean
+  /** 是否允许用户自定义输入（默认 true） */
+  allowCustomInput?: boolean
+}
+
+export interface UserQuestionLabels {
+  multiSelect?: string
+  singleSelect?: string
+  questionHeader?: string
+  skipAll?: string
+  continue?: string
+  submit?: string
+  sending?: string
+  customInputPlaceholder?: string
+  recommend?: string
+}
+
+export const DEFAULT_LABELS: Required<UserQuestionLabels> = {
+  multiSelect: 'Multi-select',
+  singleSelect: 'Single-select',
+  questionHeader: 'Question',
+  skipAll: 'Skip All',
+  continue: 'Continue',
+  submit: 'Submit',
+  sending: 'Sending...',
+  customInputPlaceholder: 'Other (please specify)',
+  recommend: 'Recommend',
+}
+
+/** 跳过问题时填充的默认值 */
+export const NO_PREFERENCE_VALUE = '[No preference]'
+
+export interface UserQuestionProps {
+  questions: UserQuestionItem[]
+  resetKey?: string
+  onAnswer: (answers: Record<string, string>) => void
+  onSkip: () => void
+  hasCustomText?: boolean
+  labels?: UserQuestionLabels
+  chat4Icon?: ReactNode
+  arrowUpSIcon?: ReactNode
+  arrowDownSIcon?: ReactNode
+  sparklingIcon?: ReactNode
+}
+
+export interface UserQuestionHandle {
+  getAnswers: () => Record<string, string>
+}

package/cli/registry/chat/user-question/useUserQuestionKeyboard.ts

@@ -0,0 +1,127 @@
+import { useEffect } from 'react'
+import type { MutableRefObject } from 'react'
+import type { UserQuestionItem, UserQuestionOption } from './types'
+
+export interface UseUserQuestionKeyboardProps {
+  isSubmitting: boolean
+  currentQuestion: UserQuestionItem | undefined
+  currentOptions: UserQuestionOption[]
+  currentQuestionIndex: number
+  questions: UserQuestionItem[]
+  focusedOptionIndex: number
+  setFocusedOptionIndex: (n: number) => void
+  currentQuestionHasAnswer: boolean
+  getSelectedOptionIndex: (i: number) => number
+  shouldScrollToQuestionRef: MutableRefObject<boolean>
+  setCurrentQuestionIndex: (i: number) => void
+  handleOptionClick: (questionText: string, optionLabel: string, questionIndex: number) => void
+  handleContinue: () => void
+}
+
+function isFocusInInput(activeEl: Element | null): boolean {
+  return (
+    activeEl instanceof HTMLInputElement ||
+    activeEl instanceof HTMLTextAreaElement ||
+    activeEl?.getAttribute('contenteditable') === 'true'
+  )
+}
+
+export function useUserQuestionKeyboard({
+  isSubmitting,
+  currentQuestion,
+  currentOptions,
+  currentQuestionIndex,
+  questions,
+  focusedOptionIndex,
+  setFocusedOptionIndex,
+  currentQuestionHasAnswer,
+  getSelectedOptionIndex,
+  shouldScrollToQuestionRef,
+  setCurrentQuestionIndex,
+  handleOptionClick,
+  handleContinue,
+}: UseUserQuestionKeyboardProps) {
+  useEffect(() => {
+    const keyHandlers: Record<string, (e: KeyboardEvent) => void> = {
+      ArrowDown(e) {
+        e.preventDefault()
+        if (focusedOptionIndex < currentOptions.length - 1) {
+          setFocusedOptionIndex(focusedOptionIndex + 1)
+        } else if (currentQuestionIndex < questions.length - 1) {
+          const nextIndex = currentQuestionIndex + 1
+          shouldScrollToQuestionRef.current = true
+          setCurrentQuestionIndex(nextIndex)
+          setFocusedOptionIndex(getSelectedOptionIndex(nextIndex))
+        }
+      },
+      ArrowUp(e) {
+        e.preventDefault()
+        if (focusedOptionIndex > 0) {
+          setFocusedOptionIndex(focusedOptionIndex - 1)
+        } else if (currentQuestionIndex > 0) {
+          const prevIndex = currentQuestionIndex - 1
+          shouldScrollToQuestionRef.current = true
+          setCurrentQuestionIndex(prevIndex)
+          setFocusedOptionIndex(getSelectedOptionIndex(prevIndex))
+        }
+      },
+      Enter(e) {
+        e.preventDefault()
+        if (currentQuestionHasAnswer) {
+          handleContinue()
+        } else if (currentQuestion && currentOptions[focusedOptionIndex]) {
+          handleOptionClick(
+            currentQuestion.question,
+            currentOptions[focusedOptionIndex].label,
+            currentQuestionIndex
+          )
+        }
+      },
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isSubmitting) return
+      if (isFocusInInput(document.activeElement)) return
+
+      const handler = keyHandlers[e.key]
+      if (handler) {
+        handler(e)
+        return
+      }
+
+      if (e.key >= '1' && e.key <= '9') {
+        const numberIndex = parseInt(e.key, 10) - 1
+        if (
+          numberIndex >= 0 &&
+          numberIndex < currentOptions.length &&
+          currentQuestion
+        ) {
+          e.preventDefault()
+          handleOptionClick(
+            currentQuestion.question,
+            currentOptions[numberIndex].label,
+            currentQuestionIndex
+          )
+          setFocusedOptionIndex(numberIndex)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [
+    isSubmitting,
+    currentQuestion,
+    currentOptions,
+    currentQuestionIndex,
+    questions.length,
+    focusedOptionIndex,
+    setFocusedOptionIndex,
+    currentQuestionHasAnswer,
+    getSelectedOptionIndex,
+    setCurrentQuestionIndex,
+    handleOptionClick,
+    handleContinue,
+    shouldScrollToQuestionRef,
+  ])
+}

package/cli/registry/chat/user-question/useUserQuestionState.ts

@@ -0,0 +1,165 @@
+import { useState, useEffect, useCallback, useRef, useImperativeHandle } from 'react'
+import type { Ref } from 'react'
+import type { UserQuestionItem, UserQuestionHandle } from './types'
+
+export interface UseUserQuestionStateProps {
+  questions: UserQuestionItem[]
+  resetKey?: string
+  onAnswer: (answers: Record<string, string>) => void
+  ref: Ref<UserQuestionHandle | null>
+}
+
+export function useUserQuestionState({
+  questions,
+  resetKey,
+  ref,
+}: UseUserQuestionStateProps) {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
+  const [answers, setAnswers] = useState<Record<string, string[]>>({})
+  const [customInputs, setCustomInputs] = useState<Record<string, string>>({})
+  const [focusedOptionIndex, setFocusedOptionIndex] = useState(0)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [maxQuestionHeight, setMaxQuestionHeight] = useState<number | undefined>(undefined)
+
+  const prevIndexRef = useRef(currentQuestionIndex)
+  const prevResetKeyRef = useRef(resetKey)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const questionRefs = useRef<Map<number, HTMLDivElement>>(new Map())
+  const currentIndexRef = useRef(currentQuestionIndex)
+  const isProgrammaticScrollRef = useRef(false)
+  const shouldScrollToQuestionRef = useRef(false)
+  const customInputRefs = useRef<Map<string, HTMLInputElement>>(new Map())
+
+  const getSelectedOptionIndex = useCallback(
+    (questionIndex: number) => {
+      const question = questions[questionIndex]
+      if (!question) return 0
+      const selectedLabels = answers[question.question] || []
+      if (selectedLabels.length === 0) return 0
+      const options = question.options || []
+      const selectedIndex = options.findIndex((opt) => selectedLabels.includes(opt.label))
+      return selectedIndex >= 0 ? selectedIndex : 0
+    },
+    [questions, answers]
+  )
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getAnswers: () => {
+        const formattedAnswers: Record<string, string> = {}
+        for (const question of questions) {
+          const selected = answers[question.question] || []
+          const customInput = customInputs[question.question]?.trim()
+          const allParts: string[] = []
+          if (selected.length > 0) allParts.push(...selected)
+          if (customInput) allParts.push(customInput)
+          if (allParts.length > 0) {
+            formattedAnswers[question.question] = allParts.join(', ')
+          }
+        }
+        return formattedAnswers
+      },
+    }),
+    [answers, customInputs, questions]
+  )
+
+  useEffect(() => {
+    if (prevResetKeyRef.current !== resetKey) {
+      setIsSubmitting(false)
+      setCurrentQuestionIndex(0)
+      currentIndexRef.current = 0
+      setAnswers({})
+      setCustomInputs({})
+      setFocusedOptionIndex(0)
+      prevResetKeyRef.current = resetKey
+      questionRefs.current.clear()
+      customInputRefs.current.clear()
+    }
+  }, [resetKey])
+
+  useEffect(() => {
+    if (prevIndexRef.current !== currentQuestionIndex) {
+      currentIndexRef.current = currentQuestionIndex
+      if (shouldScrollToQuestionRef.current) {
+        isProgrammaticScrollRef.current = true
+        const questionEl = questionRefs.current.get(currentQuestionIndex)
+        const container = scrollContainerRef.current
+        if (questionEl && container) {
+          const handleScrollEnd = () => {
+            isProgrammaticScrollRef.current = false
+            shouldScrollToQuestionRef.current = false
+            container.removeEventListener('scrollend', handleScrollEnd)
+          }
+          container.addEventListener('scrollend', handleScrollEnd, { once: true })
+          questionEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+        } else {
+          isProgrammaticScrollRef.current = false
+          shouldScrollToQuestionRef.current = false
+        }
+      }
+      prevIndexRef.current = currentQuestionIndex
+    }
+  }, [currentQuestionIndex])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      let maxHeight = 0
+      questionRefs.current.forEach((el) => {
+        const h = el.getBoundingClientRect().height
+        if (h > maxHeight) maxHeight = h
+      })
+      if (maxHeight > 0) setMaxQuestionHeight(maxHeight)
+    }, 50)
+    return () => clearTimeout(timer)
+  }, [questions, resetKey])
+
+  useEffect(() => {
+    const container = scrollContainerRef.current
+    if (!container) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (isProgrammaticScrollRef.current) return
+        let maxRatio = 0
+        let visibleIndex = currentIndexRef.current
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+            maxRatio = entry.intersectionRatio
+            questionRefs.current.forEach((el, index) => {
+              if (el === entry.target) visibleIndex = index
+            })
+          }
+        })
+        if (visibleIndex !== currentIndexRef.current && maxRatio > 0.5) {
+          currentIndexRef.current = visibleIndex
+          setCurrentQuestionIndex(visibleIndex)
+          setFocusedOptionIndex(getSelectedOptionIndex(visibleIndex))
+        }
+      },
+      { root: container, threshold: [0, 0.25, 0.5, 0.75, 1] }
+    )
+    questionRefs.current.forEach((el) => {
+      if (el?.isConnected) observer.observe(el)
+    })
+    return () => observer.disconnect()
+  }, [questions, getSelectedOptionIndex])
+
+  return {
+    currentQuestionIndex,
+    setCurrentQuestionIndex,
+    answers,
+    setAnswers,
+    customInputs,
+    setCustomInputs,
+    focusedOptionIndex,
+    setFocusedOptionIndex,
+    isSubmitting,
+    setIsSubmitting,
+    maxQuestionHeight,
+    scrollContainerRef,
+    questionRefs,
+    shouldScrollToQuestionRef,
+    customInputRefs,
+    getSelectedOptionIndex,
+  }
+}

package/cli/registry/chat/user-question-answer.tsx

@@ -0,0 +1,62 @@
+import { memo } from 'react'
+import type { ReactNode } from 'react'
+import { QuestionAnswerLine } from '../basic/icons-inline'
+
+export interface UserQuestionAnswerLabels {
+  answer?: string
+  answers?: string
+}
+
+export interface UserQuestionAnswerProps {
+  answers: Record<string, string>
+  showHeader?: boolean
+  labels?: UserQuestionAnswerLabels
+  className?: string
+  questionAnswerIcon?: ReactNode
+}
+
+const DEFAULT_LABELS: Required<UserQuestionAnswerLabels> = {
+  answer: 'Answer',
+  answers: 'Answers',
+}
+
+const iconClass = 'w-4 h-4 shrink-0 text-text-tertiary'
+
+export const UserQuestionAnswer = memo(function UserQuestionAnswer({
+  answers,
+  showHeader = true,
+  labels: labelsProp,
+  className = '',
+  questionAnswerIcon,
+}: UserQuestionAnswerProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp }
+  const entries = Object.entries(answers)
+  const defaultIcon = questionAnswerIcon ?? <QuestionAnswerLine className={iconClass} />
+
+  if (entries.length === 0) return null
+
+  return (
+    <div
+      className={`rounded-lg border border-border-tertiary bg-bg-container overflow-hidden mx-2 ${className}`.trim()}
+    >
+      {showHeader && (
+        <div className="flex items-center gap-2 pl-3 pr-3 h-8 border-b border-border-tertiary">
+          {defaultIcon}
+          <span className="text-xs leading-xs text-text-tertiary">
+            {entries.length === 1 ? labels.answer : labels.answers}
+          </span>
+        </div>
+      )}
+      <div className="flex flex-col gap-3 p-3 text-xs leading-xs">
+        {entries.map(([question, answer], idx) => (
+          <div key={idx} className="flex flex-col gap-1">
+            <span className="font-medium text-text">{question}</span>
+            <span className="text-text-tertiary">{answer}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+})
+
+UserQuestionAnswer.displayName = 'UserQuestionAnswer'

package/cli/registry/lib/file-icon-maps.ts

@@ -0,0 +1,150 @@
+// ═══════════════════════════════════════════════════════════════════════════════
+// Seti 字体字符映射（与 QodeChatPanel 完全一致：FileReviewPart 内联 + utils/fileIconMaps.js）
+// 用于 qoder-seti.woff，勿改为 VSCode vs-seti 码位（E051/E055 等）
+// ═══════════════════════════════════════════════════════════════════════════════
+export const SETI_CHAR_MAP: Record<string, string> = {
+  javascript: '\ue054',
+  typescript: '\ue099',
+  react: '\ue07d',
+  json: '\ue059',
+  html: '\ue048',
+  css: '\ue01d',
+  python: '\ue07b',
+  java: '\ue050',
+  go: '\ue039',
+  rust: '\ue082',
+  php: '\ue070',
+  ruby: '\ue081',
+  vue: '\ue09d',
+  svelte: '\ue090',
+  markdown: '\ue060',
+  yaml: '\ue0a7',
+  xml: '\ue0a5',
+  shell: '\ue089',
+  sass: '\ue084',
+  settings: '\ue019',
+  default: '\ue023',
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Seti 图标颜色（hex，用于 Seti 字体渲染 style.color）
+// ═══════════════════════════════════════════════════════════════════════════════
+export const SETI_COLOR_MAP: Record<string, string> = {
+  javascript: '#F8CA3E',
+  typescript: '#1E8DEE',
+  react: '#1E8DEE',
+  json: '#F8CA3E',
+  html: '#1E8DEE',
+  css: '#1E8DEE',
+  python: '#1E8DEE',
+  java: '#E84654',
+  go: '#1E8DEE',
+  rust: '#6A89E6',
+  php: '#AE4EE2',
+  ruby: '#E84654',
+  vue: '#4EBD35',
+  svelte: '#E84654',
+  markdown: '#1E8DEE',
+  yaml: '#AE4EE2',
+  xml: '#F18745',
+  shell: '#4EBD35',
+  sass: '#E84654',
+  settings: '#6A89E6',
+  default: '#6A89E6',
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 扩展名 -> 类型名
+// ═══════════════════════════════════════════════════════════════════════════════
+export const FILE_TYPE_MAP: Record<string, string> = {
+  js: 'javascript',
+  jsx: 'react',
+  ts: 'typescript',
+  tsx: 'typescript',
+  json: 'json',
+  html: 'html',
+  css: 'css',
+  scss: 'sass',
+  sass: 'sass',
+  less: 'css',
+  py: 'python',
+  java: 'java',
+  go: 'go',
+  rs: 'rust',
+  php: 'php',
+  rb: 'ruby',
+  vue: 'vue',
+  svelte: 'svelte',
+  md: 'markdown',
+  yml: 'yaml',
+  yaml: 'yaml',
+  xml: 'xml',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  config: 'settings',
+  conf: 'settings',
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// 类型 -> Tailwind 设计 token 类（无 Seti 字体时用通用图标+此类）
+// ═══════════════════════════════════════════════════════════════════════════════
+export const TYPE_TO_TOKEN_CLASS: Record<string, string> = {
+  javascript: 'text-info',
+  typescript: 'text-info',
+  react: 'text-info',
+  json: 'text-info',
+  html: 'text-info',
+  css: 'text-info',
+  python: 'text-teal',
+  java: 'text-error',
+  go: 'text-info',
+  rust: 'text-text-tertiary',
+  php: 'text-text-tertiary',
+  ruby: 'text-error',
+  vue: 'text-success',
+  svelte: 'text-error',
+  markdown: 'text-text-secondary',
+  yaml: 'text-text-tertiary',
+  xml: 'text-text-tertiary',
+  shell: 'text-success',
+  sass: 'text-error',
+  settings: 'text-text-tertiary',
+  default: 'text-text-tertiary',
+}
+
+export function getSetiIconType(fileType?: string, filename?: string): string {
+  let iconType: string | null = null
+
+  if (filename && typeof filename === 'string' && filename.trim()) {
+    const lastDot = filename.lastIndexOf('.')
+    if (lastDot > 0 && lastDot < filename.length - 1) {
+      const ext = filename.substring(lastDot + 1).toLowerCase().trim()
+      if (ext && FILE_TYPE_MAP[ext]) iconType = FILE_TYPE_MAP[ext]
+    }
+  }
+
+  if (!iconType && fileType && typeof fileType === 'string' && fileType.trim()) {
+    const lower = fileType.toLowerCase().trim()
+    if (FILE_TYPE_MAP[lower]) iconType = FILE_TYPE_MAP[lower]
+    else if (SETI_CHAR_MAP[lower]) iconType = lower
+  }
+
+  return iconType || 'default'
+}
+
+export function getSetiIcon(fileType?: string, filename?: string): string {
+  const iconType = getSetiIconType(fileType, filename)
+  return SETI_CHAR_MAP[iconType] ?? SETI_CHAR_MAP.default
+}
+
+export function getSetiIconColor(fileType?: string, filename?: string): string {
+  const type = getSetiIconType(fileType, filename)
+  return SETI_COLOR_MAP[type] ?? SETI_COLOR_MAP.default
+}
+
+/** 返回 Tailwind token 类名，用于通用文件图标（非 Seti 字体） */
+export function getFileIconColorClass(fileType?: string, filename?: string): string {
+  const type = getSetiIconType(fileType, filename)
+  return TYPE_TO_TOKEN_CLASS[type] ?? TYPE_TO_TOKEN_CLASS.default
+}

package/cli/registry/lib/use-mermaid-render.ts

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+
+export interface UseMermaidRenderResult {
+  svg: string
+  error: string
+}
+
+/** 根据 data-style 取 Mermaid 节点圆角（px），与 scale.css 各风格对应 */
+function getMermaidRadius(dataStyle: string): string {
+  const style = (dataStyle || 'neutral').toLowerCase()
+  if (style === 'soft') return '12px'
+  if (style === 'sharp') return '0'
+  if (style === 'dense') return '4px'
+  return '6px' // neutral / compact 等
+}
+
+/** 从 document 读取当前 data-style（仅在无传入 dataStyle 时使用） */
+function getDataStyleFromDocument(): string {
+  if (typeof document === 'undefined') return 'neutral'
+  return (
+    document.documentElement.getAttribute('data-style') ||
+    document.body?.getAttribute('data-style') ||
+    'neutral'
+  )
+}
+
+export function useMermaidRender(
+  content: string,
+  id: string,
+  dataStyle?: string
+): UseMermaidRenderResult {
+  const [svg, setSvg] = useState('')
+  const [error, setError] = useState('')
+  const style = dataStyle ?? getDataStyleFromDocument()
+  const radius = getMermaidRadius(style)
+
+  useEffect(() => {
+    let cancelled = false
+    const run = async () => {
+      setError('')
+      setSvg('')
+      if (!content) return
+      try {
+        const mod = await import('mermaid')
+        const mermaid = mod?.default ?? mod
+        const themeCSS = [
+          /* 矩形：直接设 rx/ry */
+          `.node rect { rx: ${radius}; ry: ${radius}; }`,
+          `.cluster rect { rx: ${radius}; ry: ${radius}; }`,
+          `.label rect { rx: ${radius}; ry: ${radius}; }`,
+          `.edgeLabel rect { rx: ${radius}; ry: ${radius}; }`,
+          /* 菱形、六边形等 polygon：描边圆角 */
+          `.node polygon { stroke-linejoin: round; stroke-linecap: round; }`,
+          `.node path { stroke-linejoin: round; stroke-linecap: round; }`,
+          `.cluster polygon { stroke-linejoin: round; stroke-linecap: round; }`,
+          `.cluster path { stroke-linejoin: round; stroke-linecap: round; }`,
+        ].join('\n')
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: 'strict',
+          theme: 'dark',
+          themeCSS,
+        })
+        const renderId = `mermaid-${id.replace(/:/g, '')}`
+        const { svg: nextSvg } = await mermaid.render(renderId, content)
+        if (!cancelled) setSvg(nextSvg ?? '')
+      } catch (e) {
+        if (!cancelled) setError((e as Error)?.message ?? 'Failed to render mermaid.')
+      }
+    }
+    run()
+    return () => { cancelled = true }
+  }, [id, content, radius])
+
+  return { svg, error }
+}

package/cli/registry/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/cli/registry/meta.json

@@ -0,0 +1 @@
+{"button":{"files":["basic/button.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"icon-button":{"files":["basic/icon-button.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"tooltip":{"files":["basic/tooltip.tsx","basic/icons-inline.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-tooltip","class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"dropdown-menu":{"files":["basic/dropdown-menu.tsx","basic/icons-inline.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-dropdown-menu","class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"alert-dialog":{"files":["basic/alert-dialog.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-alert-dialog","class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"progress":{"files":["basic/progress.tsx"],"dependencies":["@radix-ui/react-progress","clsx"],"peerDependencies":["react","react-dom"]},"skeleton":{"files":["basic/skeleton.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"kbd":{"files":["basic/kbd.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"tag":{"files":["basic/tag.tsx","basic/icons-inline.tsx"],"dependencies":["class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"tabs":{"files":["basic/tabs.tsx"],"dependencies":["@radix-ui/react-tabs","class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"switch":{"files":["basic/switch.tsx"],"dependencies":["@radix-ui/react-switch","class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"avatar":{"files":["basic/avatar.tsx"],"dependencies":["@radix-ui/react-avatar","class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"collapse":{"files":["basic/collapse.tsx","basic/icons-inline.tsx"],"dependencies":["@radix-ui/react-accordion","clsx"],"peerDependencies":["react","react-dom"]},"slider":{"files":["basic/slider.tsx"],"dependencies":["@radix-ui/react-slider","clsx"],"peerDependencies":["react","react-dom"]},"select":{"files":["basic/select.tsx","basic/icons-inline.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-select","clsx"],"peerDependencies":["react","react-dom"]},"table":{"files":["basic/table.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"toggle":{"files":["basic/toggle.tsx"],"dependencies":["@radix-ui/react-toggle","@radix-ui/react-toggle-group","class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"radio-group":{"files":["basic/radio-group.tsx"],"dependencies":["@radix-ui/react-radio-group","class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"typography":{"files":["basic/typography.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"spinner":{"files":["basic/spinner.tsx","basic/icons-inline.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"pagination":{"files":["basic/pagination.tsx","basic/icons-inline.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"option-list":{"files":["basic/option-list.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"collapsible":{"files":["basic/collapsible.tsx"],"dependencies":["@radix-ui/react-collapsible","clsx"],"peerDependencies":["react","react-dom"]},"resizable":{"files":["basic/resizable.tsx"],"dependencies":["react-resizable-panels","clsx"],"peerDependencies":["react","react-dom"]},"scrollbar":{"files":["basic/scrollbar.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"sonner":{"files":["basic/sonner.tsx","basic/theme-from-document.ts"],"dependencies":["sonner"],"peerDependencies":["react","react-dom"]},"send-button":{"files":["chat/send-button.tsx","basic/icons-inline.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"folder-button":{"files":["chat/folder-button.tsx","basic/icons-inline.tsx"],"dependencies":["class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"file-attachment":{"files":["chat/file-attachment.tsx","basic/tag.tsx","basic/icons-inline.tsx"],"dependencies":["class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"image-attachment":{"files":["chat/image-attachment.tsx","basic/icon-button.tsx","basic/icons-inline.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"file-card":{"files":["chat/file-card.tsx","basic/icons-inline.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"request":{"files":["chat/request.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"related-prompts":{"files":["chat/related-prompts.tsx","basic/tooltip.tsx","basic/icons-inline.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-tooltip","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"permission-card":{"files":["chat/permission-card.tsx","basic/button.tsx","basic/icons-inline.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"suggestion-part":{"files":["chat/suggestion-part.tsx","basic/button.tsx","basic/dropdown-menu.tsx","basic/icons-inline.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-dropdown-menu","class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"generation-status-bar":{"files":["chat/generation-status-bar.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"queue-indicator":{"files":["chat/queue-indicator.tsx","basic/tooltip.tsx","basic/icon-button.tsx","basic/icons-inline.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-tooltip","class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"tool-invocation-card":{"files":["chat/tool-invocation-card.tsx","basic/icons-inline.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"reasoning-step":{"files":["chat/reasoning-step.tsx","basic/icons-inline.tsx"],"dependencies":["clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"sidebar-menu":{"files":["chat/sidebar-menu.tsx","basic/dropdown-menu.tsx","basic/icons-inline.tsx","basic/theme-from-document.ts"],"dependencies":["@radix-ui/react-dropdown-menu","class-variance-authority","clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"user-question-answer":{"files":["chat/user-question-answer.tsx","basic/icons-inline.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"generated-images-grid":{"files":["chat/generated-images-grid.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"thinking-indicator":{"files":["chat/thinking-indicator.tsx"],"dependencies":["clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"image-generating":{"files":["chat/image-generating.tsx","basic/icons-inline.tsx"],"dependencies":["clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"markdown":{"files":["chat/markdown.tsx"],"dependencies":["react-markdown","remark-gfm","remark-math","rehype-katex","clsx"],"peerDependencies":["react","react-dom"]},"streaming-markdown-block":{"files":["chat/streaming-markdown-block.tsx","chat/markdown.tsx"],"dependencies":["clsx"],"peerDependencies":["react","react-dom"]},"response":{"files":["chat/response.tsx"],"dependencies":["clsx","framer-motion"],"peerDependencies":["react","react-dom"]},"chat-input":{"files":["chat/chat-input/index.tsx","chat/chat-input/types.ts","chat/chat-input/useAutoResizeTextarea.ts","chat/chat-input/chat-input-textarea.tsx","chat/chat-input/chat-input-folder-selector.tsx","chat/chat-input/chat-input-model-switcher.tsx","chat/chat-input/folder-permission-dialog.tsx","chat/send-button.tsx","chat/folder-button.tsx","chat/generation-status-bar.tsx","basic/icon-button.tsx","basic/dropdown-menu.tsx","basic/alert-dialog.tsx","basic/icons-inline.tsx"],"dependencies":["class-variance-authority","clsx"],"peerDependencies":["react","react-dom"]},"user-question":{"files":["chat/user-question.tsx","basic/button.tsx","basic/icon-button.tsx","basic/option-list.tsx","basic/kbd.tsx","basic/icons-inline.tsx"],"dependencies":["clsx","framer-motion"],"peerDependencies":["react","react-dom"]}}