sparkdesign 0.0.1 → 0.1.10

package/registry/basic/tooltip.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '@/lib/utils'
+import { getThemeFromDocument } from './theme-from-document'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const TooltipRoot = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper instead of getThemeFromDocument */
+    dataStyle?: string
+    dataTheme?: string
+  }
+>(({ className, sideOffset = 8, children, dataStyle, dataTheme, ...props }, ref) => {
+  const fromDoc = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+      : fromDoc
+  return (
+    <TooltipPrimitive.Portal>
+      <div style={{ display: 'contents' }} {...dataProps}>
+        <TooltipPrimitive.Content
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(
+            'z-50 max-w-60 overflow-hidden rounded px-2 py-1 text-xs leading-5',
+            'bg-bg-highlight text-text-on-primary shadow-sm',
+            className
+          )}
+          {...props}
+        >
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.15 }}>
+            {children}
+          </motion.div>
+        </TooltipPrimitive.Content>
+      </div>
+    </TooltipPrimitive.Portal>
+  )
+})
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export interface TooltipProps {
+  content: React.ReactNode
+  children: React.ReactNode
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  contentClassName?: string
+  /** When provided, portal content uses this data-style (e.g. from ThemeStyleProvider) */
+  dataStyle?: string
+  /** When provided, portal content uses this data-theme */
+  dataTheme?: string
+}
+
+function Tooltip({ content, children, side = 'top', contentClassName, dataStyle, dataTheme }: TooltipProps) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <TooltipRoot>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} className={contentClassName} dataStyle={dataStyle} dataTheme={dataTheme}>
+          {content}
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  )
+}
+Tooltip.displayName = 'Tooltip'
+
+export {
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipContent,
+  Tooltip,
+}

package/registry/basic/typography.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Scrollbar } from './scrollbar'
+
+export type TypographyH1Props = React.ComponentProps<'h1'>
+function TypographyH1({ className, ...props }: TypographyH1Props) {
+  return (
+    <h1
+      className={cn(
+        'font-sans scroll-m-20 text-4xl font-extrabold tracking-tight text-balance text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH1.displayName = 'TypographyH1'
+
+export type TypographyH2Props = React.ComponentProps<'h2'>
+function TypographyH2({ className, ...props }: TypographyH2Props) {
+  return (
+    <h2
+      className={cn(
+        'font-sans scroll-m-20 border-b border-border-tertiary pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH2.displayName = 'TypographyH2'
+
+export type TypographyH3Props = React.ComponentProps<'h3'>
+function TypographyH3({ className, ...props }: TypographyH3Props) {
+  return (
+    <h3
+      className={cn(
+        'font-sans scroll-m-20 text-2xl font-semibold tracking-tight text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH3.displayName = 'TypographyH3'
+
+export type TypographyH4Props = React.ComponentProps<'h4'>
+function TypographyH4({ className, ...props }: TypographyH4Props) {
+  return (
+    <h4
+      className={cn(
+        'font-sans scroll-m-20 text-xl font-semibold tracking-tight text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyH4.displayName = 'TypographyH4'
+
+export type TypographyPProps = React.ComponentProps<'p'>
+function TypographyP({ className, ...props }: TypographyPProps) {
+  return (
+    <p
+      className={cn(
+        'font-sans leading-7 text-text [&:not(:first-child)]:mt-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyP.displayName = 'TypographyP'
+
+export type TypographyBlockquoteProps = React.ComponentProps<'blockquote'>
+function TypographyBlockquote({ className, ...props }: TypographyBlockquoteProps) {
+  return (
+    <blockquote
+      className={cn(
+        'font-sans mt-6 border-l-2 border-border-tertiary pl-6 italic text-text-secondary',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyBlockquote.displayName = 'TypographyBlockquote'
+
+export type TypographyTableProps = React.ComponentProps<'div'>
+function TypographyTable({ className, children, ..._rest }: TypographyTableProps) {
+  void _rest
+  return (
+    <Scrollbar
+      scrollbarVisibility="auto"
+      className={cn('font-sans my-6 w-full', className)}
+    >
+      {children}
+    </Scrollbar>
+  )
+}
+TypographyTable.displayName = 'TypographyTable'
+
+export type TypographyListProps = React.ComponentProps<'ul'>
+function TypographyList({ className, ...props }: TypographyListProps) {
+  return (
+    <ul
+      className={cn(
+        'font-sans my-6 ml-6 list-disc text-text [&>li]:mt-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyList.displayName = 'TypographyList'
+
+export type TypographyInlineCodeProps = React.ComponentProps<'code'>
+function TypographyInlineCode({ className, ...props }: TypographyInlineCodeProps) {
+  return (
+    <code
+      className={cn(
+        'relative rounded bg-fill-secondary px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyInlineCode.displayName = 'TypographyInlineCode'
+
+export type TypographyLeadProps = React.ComponentProps<'p'>
+function TypographyLead({ className, ...props }: TypographyLeadProps) {
+  return (
+    <p
+      className={cn(
+        'font-sans text-xl text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyLead.displayName = 'TypographyLead'
+
+export type TypographyLargeProps = React.ComponentProps<'div'>
+function TypographyLarge({ className, ...props }: TypographyLargeProps) {
+  return (
+    <div
+      className={cn(
+        'font-sans text-lg font-semibold text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyLarge.displayName = 'TypographyLarge'
+
+export type TypographySmallProps = React.ComponentProps<'small'>
+function TypographySmall({ className, ...props }: TypographySmallProps) {
+  return (
+    <small
+      className={cn(
+        'font-sans text-sm font-medium leading-none text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographySmall.displayName = 'TypographySmall'
+
+export type TypographyMutedProps = React.ComponentProps<'p'>
+function TypographyMuted({ className, ...props }: TypographyMutedProps) {
+  return (
+    <p
+      className={cn(
+        'font-sans text-sm text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+TypographyMuted.displayName = 'TypographyMuted'
+
+export {
+  TypographyH1,
+  TypographyH2,
+  TypographyH3,
+  TypographyH4,
+  TypographyP,
+  TypographyBlockquote,
+  TypographyTable,
+  TypographyList,
+  TypographyInlineCode,
+  TypographyLead,
+  TypographyLarge,
+  TypographySmall,
+  TypographyMuted,
+}

package/registry/chat/ask-user-part.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { Button } from '../basic/button'
+import { QuestionnaireLine, ArrowDownSLine } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 text-text-secondary'
+
+export interface AskUserPartProps {
+  title?: string
+  question: string
+  skipText?: string
+  runText?: string
+  askTimeText?: string
+  onSkip?: () => void
+  onRun?: () => void
+  onAskTimeChange?: (value: string) => void
+  contentMaxHeight?: number
+  collapsible?: boolean
+  className?: string
+  headerIcon?: ReactNode
+}
+
+const defaultHeaderIcon = <QuestionnaireLine className={ICON_CLASS} />
+
+export function AskUserPart({
+  title = 'Initializing agent…',
+  question,
+  skipText = 'Skip ⌘⌫',
+  runText = 'Run ⌘⏎',
+  askTimeText = 'Ask any time',
+  onSkip,
+  onRun,
+  contentMaxHeight,
+  collapsible = true,
+  className,
+  headerIcon,
+}: AskUserPartProps) {
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon ?? defaultHeaderIcon}
+      headerTitle={<span className="text-left">{title}</span>}
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      defaultExpanded
+      contentMaxHeight={contentMaxHeight}
+      collapsible={collapsible}
+      footer={
+        <>
+          <Button variant="ghost" size="sm" className="gap-1 py-0.5 px-0 text-text-secondary hover:text-text">
+            <span className="text-xs">{askTimeText}</span>
+            <ArrowDownSLine className="w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0" />
+          </Button>
+          <div className="flex-1" />
+          <Button variant="ghost" size="sm" onClick={onSkip} className="bg-fill text-text-tertiary hover:bg-fill-secondary hover:text-text-secondary">
+            {skipText}
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onRun}>
+            {runText}
+          </Button>
+        </>
+      }
+      className={className}
+    >
+      <div className="text-sm text-left">
+        <span className="text-text">{question}</span>
+      </div>
+    </CollapsibleCard>
+  )
+}
+
+AskUserPart.displayName = 'AskUserPart'

package/registry/chat/browser-action-part.tsx

@@ -0,0 +1,166 @@
+import { useState, type ReactNode } from 'react'
+import { CollapsibleCard } from '../basic/collapsible-card'
+import { Button } from '../basic/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../basic/select'
+import { GlobalLine, WarningLine, Forbid2Line } from '../basic/icons-inline'
+
+const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
+
+export type BrowserActionStatus = 'normal' | 'failed' | 'skipped'
+
+export interface BrowserActionPartProps {
+  description?: string
+  content?: string
+  status?: BrowserActionStatus
+  onRun?: () => void
+  onSkip?: () => void
+  onViewDetail?: () => void
+  onAskEveryTimeChange?: (value: string) => void
+  className?: string
+  /** 供 Select 下拉浮层继承布局风格（如 dense），不传则从 document 读取 */
+  dataStyle?: string
+  /** 供 Select 下拉浮层继承颜色主题，不传则从 document 读取 */
+  dataTheme?: string
+  normalIcon?: ReactNode
+  failedIcon?: ReactNode
+  skippedIcon?: ReactNode
+}
+
+const defaultNormalIcon = <GlobalLine className={`${ICON_CLASS} text-text-secondary`} />
+const defaultFailedIcon = <WarningLine className={`${ICON_CLASS} text-warning`} />
+const defaultSkippedIcon = <Forbid2Line className={`${ICON_CLASS} text-text-secondary`} />
+
+function BrowserFooter({
+  askValue,
+  onAskChange,
+  onSkip,
+  onRun,
+  dataStyle,
+  dataTheme,
+}: {
+  askValue: string
+  onAskChange: (value: string) => void
+  onSkip: () => void
+  onRun: () => void
+  dataStyle?: string
+  dataTheme?: string
+}) {
+  return (
+    <div className="flex items-center gap-2 flex-1 min-w-0">
+      <div className="shrink-0 w-fit">
+        <Select value={askValue} onValueChange={onAskChange}>
+          <SelectTrigger
+            className="h-7 w-auto min-w-0 border-0 bg-transparent px-2 py-0 text-xs text-text-tertiary hover:text-text [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent
+            dataStyle={dataStyle}
+            dataTheme={dataTheme}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <SelectItem value="Ask every time">Ask every time</SelectItem>
+            <SelectItem value="Always allow">Always allow</SelectItem>
+            <SelectItem value="Always deny">Always deny</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex-1 h-4 border-l border-border-tertiary opacity-10" />
+      <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onSkip() }}>
+        Skip ⌘⌫
+      </Button>
+      <Button variant="secondary" size="sm" onClick={(e) => { e.stopPropagation(); onRun() }}>
+        Run ⌘⏎
+      </Button>
+    </div>
+  )
+}
+
+export function BrowserActionPart({
+  description,
+  content,
+  status = 'normal',
+  onRun,
+  onSkip,
+  onViewDetail,
+  onAskEveryTimeChange,
+  className,
+  dataStyle,
+  dataTheme,
+  normalIcon,
+  failedIcon,
+  skippedIcon,
+}: BrowserActionPartProps) {
+  const [askValue, setAskValue] = useState('Ask every time')
+
+  const handleAskChange = (value: string) => {
+    setAskValue(value)
+    onAskEveryTimeChange?.(value)
+  }
+
+  const headerIcon =
+    status === 'failed'
+      ? (failedIcon ?? defaultFailedIcon)
+      : status === 'skipped'
+        ? (skippedIcon ?? defaultSkippedIcon)
+        : (normalIcon ?? defaultNormalIcon)
+
+  const headerTitle =
+    status === 'failed' ? (
+      <span>Browser Failed</span>
+    ) : status === 'skipped' ? (
+      <span>Browser Skipped</span>
+    ) : (
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <span className="shrink-0">Browser</span>
+        {description != null && (
+          <span className="flex-1 min-w-0 truncate text-text-tertiary">{description}</span>
+        )}
+      </div>
+    )
+
+  const headerRight =
+    status === 'failed' ? (
+      <Button variant="text" size="sm" onClick={(e) => { e.stopPropagation(); onViewDetail?.() }}>
+        View Detail
+      </Button>
+    ) : undefined
+
+  const footer =
+    status === 'normal' ? (
+      <BrowserFooter
+        askValue={askValue}
+        onAskChange={handleAskChange}
+        onSkip={() => onSkip?.()}
+        onRun={() => onRun?.()}
+        dataStyle={dataStyle}
+        dataTheme={dataTheme}
+      />
+    ) : undefined
+
+  return (
+    <CollapsibleCard
+      headerIcon={headerIcon}
+      headerTitle={headerTitle}
+      headerRight={headerRight}
+      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
+      defaultExpanded={status === 'normal'}
+      collapsible={status === 'normal'}
+      footer={footer}
+      className={className}
+    >
+      {content != null && content !== '' && (
+        <span className="text-xs leading-xs text-text whitespace-pre-wrap break-words">{content}</span>
+      )}
+    </CollapsibleCard>
+  )
+}
+
+BrowserActionPart.displayName = 'BrowserActionPart'

package/registry/chat/chat-input/chat-input-folder-selector.tsx

@@ -0,0 +1,185 @@
+import { useState, useCallback, useRef } from 'react'
+import { FolderButton } from '../folder-button'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from '../../basic/dropdown-menu'
+import { FolderPermissionDialog } from './folder-permission-dialog'
+import { FolderLine, FolderFillLine, TimeLine } from '../../basic/icons-inline'
+import type { FolderPermissionConfig, InputPropsWithWebkitDirectory } from './types'
+
+const MOCK_HISTORY_FOLDERS = ['~/Projects/qoder-work-ui', '~/Documents/workspace', '~/Desktop/demo', '~/code/my-app']
+
+const iconClass = 'mr-2 w-4 h-4 shrink-0'
+
+export interface ChatInputFolderSelectorProps {
+  disabled: boolean
+  folderButtonLabel: string
+  folderPermission?: FolderPermissionConfig
+  onFolderButtonClick?: () => void
+  onFolderClear?: () => void
+  onFolderSelect: (files: FileList) => void
+  hasFolderSelected: boolean
+  dataStyle?: string
+  dataTheme?: string
+  folderIcon?: React.ReactNode
+  folderOpenIcon?: React.ReactNode
+  historyIcon?: React.ReactNode
+  subMenuArrowIcon?: React.ReactNode
+  folderFillIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+}
+
+export function ChatInputFolderSelector({
+  disabled,
+  folderButtonLabel,
+  folderPermission,
+  onFolderButtonClick,
+  onFolderClear,
+  onFolderSelect,
+  hasFolderSelected,
+  dataStyle,
+  dataTheme,
+  folderIcon = <FolderLine className={iconClass} />,
+  folderOpenIcon = <FolderFillLine className={iconClass} />,
+  historyIcon = <TimeLine className={iconClass} />,
+  subMenuArrowIcon,
+  folderFillIcon,
+  closeIcon,
+}: ChatInputFolderSelectorProps) {
+  const enableFolderPermissionDialog = folderPermission?.enable ?? false
+  const folderPermissionProjectName = folderPermission?.projectName ?? '04_代码'
+  const [folderPermissionOpen, setFolderPermissionOpen] = useState(false)
+  const [folderPermissionAlwaysAllow, setFolderPermissionAlwaysAllow] = useState(false)
+  const [folderMenuOpen, setFolderMenuOpen] = useState(false)
+  const folderInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFolderButtonClick = onFolderButtonClick ?? (() => {})
+
+  const openFolderPicker = () => {
+    folderInputRef.current?.click()
+  }
+
+  const handleFolderClear = () => {
+    if (folderInputRef.current) folderInputRef.current.value = ''
+    onFolderClear?.()
+  }
+
+  const requestFolderPermission = useCallback((mode: 'once' | 'always') => {
+    if (mode === 'always') setFolderPermissionAlwaysAllow(true)
+    setFolderPermissionOpen(false)
+    setFolderMenuOpen(true)
+  }, [])
+
+  const handleFolderMenuOpenChange = (next: boolean) => {
+    if (!enableFolderPermissionDialog) {
+      setFolderMenuOpen(next)
+      return
+    }
+    if (!next) {
+      setFolderMenuOpen(false)
+      return
+    }
+    if (folderPermissionAlwaysAllow) {
+      setFolderMenuOpen(true)
+      return
+    }
+    setFolderPermissionOpen(true)
+    setFolderMenuOpen(false)
+  }
+
+  const handleFolderInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (files && files.length > 0) onFolderSelect(files)
+  }
+
+  if (onFolderButtonClick) {
+    return (
+      <FolderButton
+        label={folderButtonLabel}
+        onClick={handleFolderButtonClick}
+        disabled={disabled}
+        folderIcon={folderIcon}
+        folderFillIcon={folderFillIcon}
+      />
+    )
+  }
+
+  return (
+    <>
+      <DropdownMenu open={folderMenuOpen} onOpenChange={handleFolderMenuOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <FolderButton
+            label={folderButtonLabel}
+            disabled={disabled}
+            selected={hasFolderSelected}
+            onClear={handleFolderClear}
+            folderIcon={folderIcon}
+            folderFillIcon={folderFillIcon}
+            closeIcon={closeIcon}
+            className="focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0"
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          side="top"
+          className="min-w-50"
+          dataStyle={dataStyle}
+          dataTheme={dataTheme}
+        >
+          <DropdownMenuItem onClick={openFolderPicker}>
+            {folderIcon}
+            Add folder
+          </DropdownMenuItem>
+          {hasFolderSelected && (
+            <DropdownMenuItem onClick={openFolderPicker}>
+              {folderOpenIcon}
+              Replace folder
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger subTriggerIcon={subMenuArrowIcon}>
+              {historyIcon}
+              Recent folders
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent
+              collisionPadding={{ bottom: 24, left: 8 }}
+              dataStyle={dataStyle}
+              dataTheme={dataTheme}
+            >
+              {MOCK_HISTORY_FOLDERS.map((path) => (
+                <DropdownMenuItem key={path} onClick={() => {}}>
+                  {path}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <input
+        ref={folderInputRef}
+        type="file"
+        {...({ webkitdirectory: '' } as InputPropsWithWebkitDirectory)}
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleFolderInputChange}
+      />
+      {enableFolderPermissionDialog && (
+        <FolderPermissionDialog
+          open={folderPermissionOpen}
+          onOpenChange={setFolderPermissionOpen}
+          projectName={folderPermissionProjectName}
+          onAllowOnce={() => requestFolderPermission('once')}
+          onAllowAlways={() => requestFolderPermission('always')}
+        />
+      )}
+    </>
+  )
+}
+
+ChatInputFolderSelector.displayName = 'ChatInputFolderSelector'