skrypt-ai 0.3.3 → 0.4.0

package/dist/template/src/components/mdx/card.tsx

@@ -1,32 +1,44 @@
 import Link from 'next/link'
 import { cn } from '@/lib/utils'
-import * as Icons from 'lucide-react'
+import {
+  BookOpen, Code, FileText, Settings, Key, Zap, Shield, Globe,
+  Terminal, Database, Cloud, Lock, Rocket, Search, Star, Heart,
+  AlertTriangle, CheckCircle, Info, HelpCircle, ArrowRight,
+  ExternalLink, Package, Puzzle, GitBranch, Cpu
+} from 'lucide-react'
+
+const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
+  BookOpen, Code, FileText, Settings, Key, Zap, Shield, Globe,
+  Terminal, Database, Cloud, Lock, Rocket, Search, Star, Heart,
+  AlertTriangle, CheckCircle, Info, HelpCircle, ArrowRight,
+  ExternalLink, Package, Puzzle, GitBranch, Cpu
+}
 
 interface CardProps {
   title: string
-  icon?: keyof typeof Icons
+  icon?: string
   href?: string
   children?: React.ReactNode
 }
 
 export function Card({ title, icon, href, children }: CardProps) {
-  const Icon = icon ? Icons[icon] as React.ComponentType<{ size?: number; className?: string }> : null
+  const Icon = icon ? iconMap[icon] : null
 
   const content = (
     <div className={cn(
-      'p-4 border border-[var(--color-border)] rounded-lg transition-colors',
-      href && 'hover:border-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer'
+      'group p-4 sm:px-6 sm:py-5 rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg)] overflow-hidden w-full',
+      href && 'cursor-pointer hover:!border-[var(--color-primary)]'
     )}>
-      <div className="flex items-start gap-3">
+      <div className="flex items-start gap-3.5">
         {Icon && (
-          <div className="p-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] rounded-lg">
-            <Icon size={20} />
+          <div className="shrink-0 mt-0.5 text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)]">
+            <Icon size={18} />
           </div>
         )}
         <div>
-          <h3 className="font-medium text-[var(--color-text)]">{title}</h3>
+          <h3 className="font-semibold text-[0.9375rem] text-[var(--color-text)] !mt-0 !mb-0">{title}</h3>
           {children && (
-            <div className="mt-1 text-sm text-[var(--color-text-secondary)]">
+            <div className="mt-1.5 text-[0.8125rem] leading-relaxed text-[var(--color-text-secondary)]">
               {children}
             </div>
           )}
@@ -36,7 +48,7 @@ export function Card({ title, icon, href, children }: CardProps) {
   )
 
   if (href) {
-    return <Link href={href}>{content}</Link>
+    return <Link href={href} className="hover:no-underline">{content}</Link>
   }
 
   return content
@@ -55,7 +67,7 @@ export function CardGroup({ cols = 2, children }: CardGroupProps) {
   }
 
   return (
-    <div className={cn('grid gap-4 my-6', gridCols[cols])}>
+    <div className={cn('grid gap-4 my-2', gridCols[cols])}>
       {children}
     </div>
   )

package/dist/template/src/components/mdx/code-block.tsx

@@ -20,9 +20,23 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
   })
 
   async function handleCopy() {
-    await navigator.clipboard.writeText(codeText)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    try {
+      await navigator.clipboard.writeText(codeText)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Fallback for insecure contexts
+      const textarea = document.createElement('textarea')
+      textarea.value = codeText
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
   }
 
   return (

package/dist/template/src/components/mdx/code-group.tsx

@@ -1,8 +1,10 @@
 'use client'
 
-import { useState, Children, isValidElement, ReactNode, ReactElement } from 'react'
+import { useState, useEffect, useContext, Children, isValidElement, ReactNode, ReactElement } from 'react'
 import { cn } from '@/lib/utils'
 import { Copy, Check } from 'lucide-react'
+import { highlight, DEFAULT_THEME, isLightTheme, type ThemeName } from '@/lib/highlight'
+import { SyntaxThemeContext } from '@/contexts/syntax-theme'
 
 interface CodeGroupProps {
   children: ReactNode
@@ -54,17 +56,54 @@ export function CodeGroup({ children }: CodeGroupProps) {
   const blocks = extractCodeBlocks(children)
   const [activeIndex, setActiveIndex] = useState(0)
   const [copied, setCopied] = useState(false)
+  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
+
+  const syntaxContext = useContext(SyntaxThemeContext)
+  const theme: ThemeName = syntaxContext?.theme ?? DEFAULT_THEME
+  const isLight = isLightTheme(theme)
+
+  const activeBlock = blocks[activeIndex] || blocks[0]
+
+  useEffect(() => {
+    if (!activeBlock?.code) return
+    let cancelled = false
+
+    async function doHighlight() {
+      try {
+        const html = await highlight(activeBlock.code, activeBlock.language, theme)
+        if (!cancelled) setHighlightedHtml(html)
+      } catch (err) {
+        console.error('CodeGroup highlight failed:', err)
+        if (!cancelled) setHighlightedHtml(null)
+      }
+    }
+
+    setHighlightedHtml(null)
+    doHighlight()
+    return () => { cancelled = true }
+  }, [activeBlock?.code, activeBlock?.language, theme])
 
   if (blocks.length === 0) {
     return <div>{children}</div>
   }
 
-  const activeBlock = blocks[activeIndex]
-
   const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(activeBlock.code)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    try {
+      await navigator.clipboard.writeText(activeBlock.code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      const textarea = document.createElement('textarea')
+      textarea.value = activeBlock.code
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
   }
 
   const getLanguageLabel = (lang: string, filename?: string) => {
@@ -72,31 +111,46 @@ export function CodeGroup({ children }: CodeGroupProps) {
     const labels: Record<string, string> = {
       typescript: 'TypeScript',
       javascript: 'JavaScript',
+      ts: 'TypeScript',
+      js: 'JavaScript',
+      tsx: 'TypeScript',
+      jsx: 'JavaScript',
       python: 'Python',
+      py: 'Python',
       bash: 'Bash',
       shell: 'Shell',
+      sh: 'Shell',
       json: 'JSON',
       yaml: 'YAML',
+      yml: 'YAML',
       go: 'Go',
       rust: 'Rust',
+      ruby: 'Ruby',
+      php: 'PHP',
+      java: 'Java',
+      csharp: 'C#',
+      cs: 'C#',
+      css: 'CSS',
+      html: 'HTML',
+      sql: 'SQL',
     }
-    return labels[lang] || lang
+    return labels[lang] || lang.charAt(0).toUpperCase() + lang.slice(1)
   }
 
   return (
-    <div className="my-6 border border-[var(--color-border)] rounded-lg overflow-hidden">
+    <div className="my-6 rounded-xl overflow-hidden border border-[var(--color-border)] bg-[var(--color-code-bg)]">
       {/* Tab bar */}
-      <div className="flex items-center justify-between bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
-        <div className="flex">
+      <div className="flex items-center justify-between border-b border-[var(--color-code-border)]">
+        <div className="flex gap-0 px-1 pt-1">
           {blocks.map((block, index) => (
             <button
               key={`${block.language}-${block.filename || index}`}
               onClick={() => setActiveIndex(index)}
               className={cn(
-                'px-4 py-2 text-sm font-medium transition-colors',
+                'px-3 py-1.5 text-[0.75rem] font-medium rounded-t-lg transition-colors',
                 index === activeIndex
-                  ? 'bg-[var(--color-code-bg)] text-[var(--color-code-text)]'
-                  : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
+                  ? 'bg-[var(--color-bg-tertiary)] text-[var(--color-code-text)]'
+                  : 'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]'
               )}
             >
               {getLanguageLabel(block.language, block.filename)}
@@ -105,21 +159,27 @@ export function CodeGroup({ children }: CodeGroupProps) {
         </div>
         <button
           onClick={copyToClipboard}
-          className="p-2 mr-2 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] transition-colors"
+          className="p-2 mr-2 text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] transition-colors"
           title="Copy code"
+          aria-label={copied ? 'Copied' : 'Copy code'}
         >
-          {copied ? <Check size={16} /> : <Copy size={16} />}
+          {copied ? <Check size={14} /> : <Copy size={14} />}
         </button>
       </div>
 
       {/* Code content */}
-      <div className="bg-[var(--color-code-bg)]">
-        <pre className="!m-0 !rounded-none">
+      {highlightedHtml ? (
+        <div
+          className="[&>pre]:!rounded-none [&>pre]:!border-0 [&>pre]:!m-0 [&>pre]:py-3.5 [&>pre]:px-4 [&>pre]:overflow-x-auto"
+          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+        />
+      ) : (
+        <pre className="!m-0 !rounded-none !border-0 !bg-transparent py-3.5 px-4 overflow-x-auto">
           <code className={`language-${activeBlock.language}`}>
             {activeBlock.code}
           </code>
         </pre>
-      </div>
+      )}
     </div>
   )
 }

package/dist/template/src/components/mdx/code-playground.tsx

@@ -157,6 +157,7 @@ function PlaygroundToolbar({ originalCode, filename, autoRun, onAutoRunChange }:
         onClick={handleReset}
         className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
         title="Reset code"
+        aria-label="Reset code"
       >
         <RotateCcw size={14} />
       </button>
@@ -164,6 +165,7 @@ function PlaygroundToolbar({ originalCode, filename, autoRun, onAutoRunChange }:
         onClick={handleDownload}
         className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
         title="Download code"
+        aria-label="Download code"
       >
         <Download size={14} />
       </button>
@@ -171,6 +173,7 @@ function PlaygroundToolbar({ originalCode, filename, autoRun, onAutoRunChange }:
         onClick={() => onAutoRunChange(!autoRun)}
         className={`p-1.5 rounded ${autoRun ? 'text-emerald-500' : 'text-[var(--color-text-tertiary)]'} hover:text-[var(--color-text)]`}
         title={autoRun ? 'Auto-run enabled' : 'Auto-run disabled'}
+        aria-label={autoRun ? 'Auto-run enabled' : 'Auto-run disabled'}
       >
         {autoRun ? <Play size={14} /> : <Pause size={14} />}
       </button>

package/dist/template/src/components/mdx/go-playground.tsx

@@ -154,6 +154,7 @@ export function GoPlayground({
             onClick={handleReset}
             className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
             title="Reset code"
+            aria-label="Reset code"
           >
             <RotateCcw size={14} />
           </button>
@@ -161,6 +162,7 @@ export function GoPlayground({
             onClick={handleDownload}
             className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
             title="Download code"
+            aria-label="Download code"
           >
             <Download size={14} />
           </button>
@@ -168,6 +170,7 @@ export function GoPlayground({
             onClick={openInPlayground}
             className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
             title="Open in Go Playground"
+            aria-label="Open in Go Playground"
           >
             <ExternalLink size={14} />
           </button>

package/dist/template/src/components/mdx/highlighted-code.tsx

@@ -1,89 +1,229 @@
 'use client'
 
-import { useState, useEffect, useContext, ReactNode, isValidElement, Children } from 'react'
+import { useState, useEffect, useContext, ReactNode, isValidElement, Children, useRef } from 'react'
 import { Copy, Check } from 'lucide-react'
-import { highlight, DEFAULT_THEME, type ThemeName } from '@/lib/highlight'
-
-// Import the context directly to use useContext safely
+import { highlight, DEFAULT_THEME, isLightTheme, type ThemeName } from '@/lib/highlight'
 import { SyntaxThemeContext } from '@/contexts/syntax-theme'
 
+const TERMINAL_LANGUAGES = ['bash', 'shell', 'sh', 'zsh']
+
 interface HighlightedCodeProps {
   children: ReactNode
   className?: string
 }
 
+const langLabels: Record<string, string> = {
+  typescript: 'TypeScript', javascript: 'JavaScript',
+  ts: 'TypeScript', js: 'JavaScript', tsx: 'TSX', jsx: 'JSX',
+  python: 'Python', py: 'Python',
+  bash: 'Bash', shell: 'Shell', sh: 'Shell',
+  json: 'JSON', yaml: 'YAML', go: 'Go', rust: 'Rust',
+  css: 'CSS', html: 'HTML', sql: 'SQL', text: '',
+}
+
+/** Parse meta string for showLineNumbers */
+function parseShowLineNumbers(meta: string): boolean {
+  return /showLineNumbers/.test(meta)
+}
+
+/** Parse meta string for highlighted lines: {1,3-5,8} */
+function parseHighlightedLines(meta: string): Set<number> {
+  const set = new Set<number>()
+  const match = meta.match(/\{([\d,\s-]+)\}/)
+  if (!match) return set
+
+  const parts = match[1].split(',')
+  for (const part of parts) {
+    const trimmed = part.trim()
+    const rangeMatch = trimmed.match(/^(\d+)-(\d+)$/)
+    if (rangeMatch) {
+      const start = parseInt(rangeMatch[1])
+      const end = parseInt(rangeMatch[2])
+      for (let i = start; i <= end; i++) set.add(i)
+    } else {
+      const num = parseInt(trimmed)
+      if (!isNaN(num)) set.add(num)
+    }
+  }
+  return set
+}
+
+/** Parse meta string for title="filename.ts" or title=filename.ts */
+function parseFilename(meta: string): string | undefined {
+  const match = meta.match(/title=["']?([^"'\s]+)["']?/)
+  return match ? match[1] : undefined
+}
+
 export function HighlightedCode({ children, className }: HighlightedCodeProps) {
   const [copied, setCopied] = useState(false)
+  const [showToast, setShowToast] = useState(false)
   const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
+  const copyButtonRef = useRef<HTMLButtonElement>(null)
 
-  // Use context safely - fallback to default if not available
   const syntaxContext = useContext(SyntaxThemeContext)
   const theme: ThemeName = syntaxContext?.theme ?? DEFAULT_THEME
+  const isLight = isLightTheme(theme)
 
-  // Extract code text and language from children
   let codeText = ''
   let language = 'text'
+  let metaString = ''
 
   Children.forEach(children, (child) => {
     if (isValidElement(child) && child.type === 'code') {
-      const props = child.props as { children?: string; className?: string }
+      const props = child.props as { children?: string; className?: string; 'data-meta'?: string }
       codeText = props.children || ''
-      // Extract language from className like "language-typescript"
       const classMatch = props.className?.match(/language-(\w+)/)
-      if (classMatch) {
-        language = classMatch[1]
-      }
+      if (classMatch) language = classMatch[1]
+      metaString = props['data-meta'] || ''
     }
   })
 
+  const showLineNumbers = parseShowLineNumbers(metaString)
+  const highlightedLines = parseHighlightedLines(metaString)
+  const filename = parseFilename(metaString)
+  const hasLineFeatures = showLineNumbers || highlightedLines.size > 0
+  const isTerminal = TERMINAL_LANGUAGES.includes(language)
+
   useEffect(() => {
     let cancelled = false
-
     async function doHighlight() {
       if (!codeText) return
-
       try {
         const html = await highlight(codeText, language, theme)
-        if (!cancelled) {
-          setHighlightedHtml(html)
-        }
+        if (!cancelled) setHighlightedHtml(html)
       } catch (err) {
         console.error('Highlight failed:', err)
       }
     }
-
     doHighlight()
-
-    return () => {
-      cancelled = true
-    }
+    return () => { cancelled = true }
   }, [codeText, language, theme])
 
   async function handleCopy() {
-    await navigator.clipboard.writeText(codeText)
+    try {
+      await navigator.clipboard.writeText(codeText)
+    } catch {
+      const textarea = document.createElement('textarea')
+      textarea.value = codeText
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
     setCopied(true)
+    setShowToast(true)
     setTimeout(() => setCopied(false), 2000)
+    setTimeout(() => setShowToast(false), 1500)
   }
 
-  return (
-    <div className="relative group my-4">
-      {highlightedHtml ? (
-        <div
-          className="[&>pre]:rounded-lg [&>pre]:p-4 [&>pre]:overflow-x-auto"
-          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-        />
-      ) : (
-        <pre className={className}>
+  if (!codeText.trim()) return null
+
+  const langLabel = langLabels[language] || language
+  const showLabel = langLabel && language !== 'text'
+  const lines = codeText.split('\n')
+  // Remove trailing empty line from code
+  if (lines[lines.length - 1] === '') lines.pop()
+
+  /** Render code with line numbers and/or line highlighting */
+  function renderWithLineFeatures(htmlContent: string | null) {
+    if (!hasLineFeatures) {
+      // No line features — render normally
+      if (htmlContent) {
+        return (
+          <div
+            className="[&>pre]:!rounded-none [&>pre]:!border-0 [&>pre]:!m-0 [&>pre]:py-3.5 [&>pre]:px-4 [&>pre]:overflow-x-auto"
+            dangerouslySetInnerHTML={{ __html: htmlContent }}
+          />
+        )
+      }
+      return (
+        <pre className="!rounded-none !border-0 !m-0 py-3.5 px-4 overflow-x-auto">
           {children}
         </pre>
+      )
+    }
+
+    // With line features, we need to render line by line
+    return (
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse" style={{ tableLayout: 'auto' }}>
+          <tbody>
+            {lines.map((line, i) => {
+              const lineNum = i + 1
+              const isHighlighted = highlightedLines.has(lineNum)
+              return (
+                <tr
+                  key={i}
+                  className={isHighlighted ? 'bg-[var(--color-primary)]/[0.07]' : ''}
+                >
+                  {showLineNumbers && (
+                    <td className="text-right pr-4 select-none text-[var(--color-text-tertiary)] text-[0.75rem] py-0 pl-4 w-[1%] whitespace-nowrap align-top leading-[1.7142857]">
+                      {lineNum}
+                    </td>
+                  )}
+                  <td className="py-0 pr-4 whitespace-pre font-mono text-[0.875em] leading-[1.7142857]">
+                    {line || ' '}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+
+  const hasHeader = !!filename
+  const showTerminalHeader = isTerminal && !hasHeader
+
+  return (
+    <div className={`relative group mt-5 mb-8 rounded-2xl overflow-hidden border border-[var(--color-border)] ${isTerminal ? 'terminal-block' : ''}`}>
+      {/* Terminal header with macOS-style dots */}
+      {showTerminalHeader && (
+        <div className="flex items-center gap-1.5 px-4 py-2.5 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-code-border)]">
+          <span className="w-2.5 h-2.5 rounded-full bg-red-500/70" />
+          <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/70" />
+          <span className="w-2.5 h-2.5 rounded-full bg-green-500/70" />
+          <span className="ml-2 text-[0.7rem] text-[var(--color-text-tertiary)]">Terminal</span>
+        </div>
       )}
-      <button
-        onClick={handleCopy}
-        className="absolute top-2 right-2 p-1.5 rounded bg-[var(--color-bg-tertiary)]/80 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] opacity-0 group-hover:opacity-100 transition-opacity"
-        title={copied ? 'Copied!' : 'Copy code'}
-      >
-        {copied ? <Check size={14} /> : <Copy size={14} />}
-      </button>
+
+      {/* Filename header */}
+      {filename && (
+        <div className="bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)] px-4 py-2 text-[0.8125rem] text-[var(--color-text-secondary)] font-medium">
+          {filename}
+        </div>
+      )}
+
+      {renderWithLineFeatures(highlightedHtml)}
+
+      {/* Floating label + copy button — always visible (dimmed), full on hover */}
+      <div className="absolute top-2 right-2 flex items-center gap-1.5 opacity-60 group-hover:opacity-100 transition-opacity">
+        {showLabel && !filename && !showTerminalHeader && (
+          <span className={`text-[0.6875rem] px-1.5 py-0.5 rounded-md ${isLight ? 'text-black/30' : 'text-white/30'}`}>
+            {langLabel}
+          </span>
+        )}
+        <div className="relative">
+          <button
+            ref={copyButtonRef}
+            onClick={handleCopy}
+            className={`p-1.5 rounded-md backdrop-blur ${isLight ? 'text-black/30 hover:text-black/60' : 'text-white/30 hover:text-white/60'}`}
+            title={copied ? 'Copied!' : 'Copy code'}
+            aria-label={copied ? 'Copied' : 'Copy code'}
+          >
+            {copied ? <Check size={14} /> : <Copy size={14} />}
+          </button>
+          {/* Copy toast */}
+          {showToast && (
+            <span className="copy-toast absolute -bottom-8 left-1/2 -translate-x-1/2 px-2 py-1 rounded-md bg-[var(--color-bg-secondary)] border border-[var(--color-border)] text-[0.6875rem] text-[var(--color-text-secondary)] whitespace-nowrap shadow-lg">
+              Copied!
+            </span>
+          )}
+        </div>
+      </div>
     </div>
   )
 }

package/dist/template/src/components/mdx/python-playground.tsx

@@ -212,6 +212,7 @@ sys.stderr = _capture.stderr
             onClick={handleReset}
             className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
             title="Reset code"
+            aria-label="Reset code"
           >
             <RotateCcw size={14} />
           </button>
@@ -219,6 +220,7 @@ sys.stderr = _capture.stderr
             onClick={handleDownload}
             className="p-1.5 text-[var(--color-text-tertiary)] hover:text-[var(--color-text)] rounded"
             title="Download code"
+            aria-label="Download code"
           >
             <Download size={14} />
           </button>

package/dist/template/src/components/mdx/steps.tsx

@@ -8,18 +8,18 @@ export function Steps({ children }: StepsProps) {
   const items = Children.toArray(children).filter(isValidElement)
 
   return (
-    <div className="my-6 space-y-6">
+    <div className="my-8 relative">
       {items.map((child, index) => (
-        <div key={`step-${index}`} className="flex gap-4">
+        <div key={`step-${index}`} className="flex gap-4 pb-8 last:pb-0">
           <div className="flex flex-col items-center">
-            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-[var(--color-primary)] text-white text-sm font-medium">
+            <div className="flex items-center justify-center w-7 h-7 rounded-full bg-[var(--color-text)] text-[var(--color-bg)] text-xs font-semibold shrink-0">
               {index + 1}
             </div>
             {index < items.length - 1 && (
               <div className="flex-1 w-px bg-[var(--color-border)] mt-2" />
             )}
           </div>
-          <div className="flex-1 pb-6">
+          <div className="flex-1 pt-0.5">
             {child}
           </div>
         </div>
@@ -36,8 +36,8 @@ interface StepProps {
 export function Step({ title, children }: StepProps) {
   return (
     <div>
-      <h3 className="font-medium text-[var(--color-text)] mb-2">{title}</h3>
-      <div className="text-[var(--color-text-secondary)]">{children}</div>
+      <h3 className="!text-[0.9375rem] font-semibold text-[var(--color-text)] !mt-0 mb-2">{title}</h3>
+      <div className="text-[0.8125rem] text-[var(--color-text-secondary)] leading-relaxed">{children}</div>
     </div>
   )
 }