skrypt-ai 0.3.4 → 0.4.1

package/dist/template/src/components/header.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { Search, Menu, X } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { SearchDialog } from './search-dialog'
 import { ThemeToggle } from './theme-toggle'
 import { SyntaxThemeSelector } from './syntax-theme-selector'
@@ -12,10 +12,30 @@ interface HeaderProps {
   menuOpen?: boolean
   siteName?: string
   navLinks?: Array<{ title: string; path: string }>
+  logo?: string
 }
 
-export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks }: HeaderProps) {
+export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks, logo }: HeaderProps) {
   const [searchOpen, setSearchOpen] = useState(false)
+  const [isMac, setIsMac] = useState(true)
+
+  useEffect(() => {
+    setIsMac(
+      navigator.platform?.toLowerCase().includes('mac') ||
+      navigator.userAgent?.toLowerCase().includes('mac')
+    )
+  }, [])
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setSearchOpen(prev => !prev)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
 
   return (
     <>
@@ -32,8 +52,12 @@ export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks }:
               {menuOpen ? <X size={18} /> : <Menu size={18} />}
             </button>
 
-            <Link href="/" className="font-semibold text-[0.9375rem] tracking-tight text-[var(--color-text)] hover:no-underline">
-              {siteName}
+            <Link href="/" className="flex items-center gap-2 font-semibold text-[0.9375rem] tracking-tight text-[var(--color-text)] hover:no-underline">
+              {logo ? (
+                <img src={logo} alt={siteName} className="h-6 w-auto" />
+              ) : (
+                siteName
+              )}
             </Link>
 
             <nav className="hidden md:flex items-center gap-1">
@@ -63,7 +87,7 @@ export function Header({ onMenuToggle, menuOpen, siteName = 'Docs', navLinks }:
               <Search size={14} />
               <span className="hidden sm:inline">Search...</span>
               <kbd className="hidden sm:inline ml-2 px-1.5 py-0.5 text-[0.6875rem] font-medium bg-[var(--color-bg)] border border-[var(--color-border)] rounded">
-                ⌘K
+                {isMac ? '⌘K' : 'Ctrl+K'}
               </kbd>
             </button>
             <SyntaxThemeSelector />

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

@@ -17,6 +17,7 @@ export function Accordion({ title, defaultOpen = false, children }: AccordionPro
     <div className="border-b border-[var(--color-border)] last:border-b-0">
       <button
         onClick={() => setOpen(!open)}
+        aria-expanded={open}
         className="flex items-center gap-2 w-full py-3.5 text-left text-[0.875rem] font-medium text-[var(--color-text)] hover:text-[var(--color-primary)] transition-colors"
       >
         <ChevronRight
@@ -29,13 +30,13 @@ export function Accordion({ title, defaultOpen = false, children }: AccordionPro
         {title}
       </button>
       <div
-        className={cn(
-          'overflow-hidden transition-all duration-200',
-          open ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'
-        )}
+        className="grid transition-all duration-200"
+        style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
       >
-        <div className="pl-5 pb-4 text-[0.8125rem] text-[var(--color-text-secondary)] leading-relaxed">
-          {children}
+        <div className="overflow-hidden">
+          <div className="pl-5 pb-4 text-[0.8125rem] text-[var(--color-text-secondary)] leading-relaxed">
+            {children}
+          </div>
         </div>
       </div>
     </div>

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

@@ -1,25 +1,37 @@
 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(
-      'group p-5 border border-[var(--color-border)] rounded-xl transition-all duration-200',
-      href && 'hover:border-[var(--color-border-strong)] hover:shadow-sm hover:-translate-y-0.5 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.5">
         {Icon && (
-          <div className="shrink-0 p-2 bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] rounded-lg group-hover:bg-[var(--color-primary-light)] group-hover:text-[var(--color-primary)] transition-colors">
+          <div className="shrink-0 mt-0.5 text-[var(--color-text-tertiary)] group-hover:text-[var(--color-primary)]">
             <Icon size={18} />
           </div>
         )}
@@ -55,7 +67,7 @@ export function CardGroup({ cols = 2, children }: CardGroupProps) {
   }
 
   return (
-    <div className={cn('grid gap-3 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) => {
@@ -78,9 +117,9 @@ export function CodeGroup({ children }: CodeGroupProps) {
       jsx: 'JavaScript',
       python: 'Python',
       py: 'Python',
-      bash: 'Terminal',
-      shell: 'Terminal',
-      sh: 'Terminal',
+      bash: 'Bash',
+      shell: 'Shell',
+      sh: 'Shell',
       json: 'JSON',
       yaml: 'YAML',
       yml: 'YAML',
@@ -101,7 +140,7 @@ export function CodeGroup({ children }: CodeGroupProps) {
   return (
     <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 border-b border-white/[0.06]">
+      <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
@@ -110,8 +149,8 @@ export function CodeGroup({ children }: CodeGroupProps) {
               className={cn(
                 'px-3 py-1.5 text-[0.75rem] font-medium rounded-t-lg transition-colors',
                 index === activeIndex
-                  ? 'bg-white/[0.06] text-[var(--color-code-text)]'
-                  : 'text-white/40 hover:text-white/60'
+                  ? '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)}
@@ -120,19 +159,27 @@ export function CodeGroup({ children }: CodeGroupProps) {
         </div>
         <button
           onClick={copyToClipboard}
-          className="p-2 mr-2 text-white/30 hover:text-white/60 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={14} /> : <Copy size={14} />}
         </button>
       </div>
 
       {/* Code content */}
-      <pre className="!m-0 !rounded-none !border-0 !bg-transparent">
-        <code className={`language-${activeBlock.language}`}>
-          {activeBlock.code}
-        </code>
-      </pre>
+      {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>
   )
 }

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,134 +1,229 @@
 'use client'
 
-import { useState, useEffect, useContext, ReactNode, isValidElement, Children } from 'react'
-import { Copy, Check, FileCode } from 'lucide-react'
-import { highlight, DEFAULT_THEME, type ThemeName } from '@/lib/highlight'
+import { useState, useEffect, useContext, ReactNode, isValidElement, Children, useRef } from 'react'
+import { Copy, Check } from 'lucide-react'
+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: 'Terminal',
-  shell: 'Terminal',
-  sh: 'Terminal',
-  json: 'JSON',
-  yaml: 'YAML',
-  go: 'Go',
-  rust: 'Rust',
-  css: 'CSS',
-  html: 'HTML',
-  sql: 'SQL',
-  text: '',
+  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)
 
   const syntaxContext = useContext(SyntaxThemeContext)
   const theme: ThemeName = syntaxContext?.theme ?? DEFAULT_THEME
+  const isLight = isLightTheme(theme)
 
   let codeText = ''
   let language = 'text'
-  let filename = ''
+  let metaString = ''
 
   Children.forEach(children, (child) => {
     if (isValidElement(child) && child.type === 'code') {
-      const props = child.props as { children?: string; className?: string; 'data-filename'?: string }
+      const props = child.props as { children?: string; className?: string; 'data-meta'?: string }
       codeText = props.children || ''
       const classMatch = props.className?.match(/language-(\w+)/)
-      if (classMatch) {
-        language = classMatch[1]
-      }
-      if (props['data-filename']) {
-        filename = props['data-filename']
-      }
+      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)
   }
 
-  const langLabel = filename || langLabels[language] || language
-  const showHeader = langLabel && language !== 'text'
+  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 my-5 rounded-xl overflow-hidden border border-[var(--color-border)] bg-[var(--color-code-bg)]">
-      {/* Filename / language header bar */}
-      {showHeader && (
-        <div className="flex items-center justify-between px-4 py-2 border-b border-white/[0.06]">
-          <div className="flex items-center gap-2 text-[0.75rem] text-white/40">
-            <FileCode size={13} />
-            <span>{langLabel}</span>
-          </div>
+    <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>
+      )}
+
+      {/* 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 text-white/30 hover:text-white/60 transition-colors"
+            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={13} /> : <Copy size={13} />}
+            {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>
-      )}
-
-      {highlightedHtml ? (
-        <div
-          className="[&>pre]:!rounded-none [&>pre]:!border-0 [&>pre]:!m-0 [&>pre]:px-4 [&>pre]:py-3 [&>pre]:overflow-x-auto [&>pre]:!bg-transparent"
-          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-        />
-      ) : (
-        <pre className="!rounded-none !border-0 !m-0 px-4 py-3 overflow-x-auto !bg-transparent">
-          {children}
-        </pre>
-      )}
-
-      {/* Copy button fallback (no header) */}
-      {!showHeader && (
-        <button
-          onClick={handleCopy}
-          className="absolute top-2.5 right-2.5 p-1.5 rounded-md text-white/30 hover:text-white/60 opacity-0 group-hover:opacity-100 transition-all"
-          title={copied ? 'Copied!' : 'Copy code'}
-        >
-          {copied ? <Check size={13} /> : <Copy size={13} />}
-        </button>
-      )}
+      </div>
     </div>
   )
 }