@leanspec/ui 0.2.13 → 0.2.15-dev.21022397862

package/src/components/ThemeToggle.tsx

@@ -1,25 +0,0 @@
-import { Sun, Moon } from 'lucide-react';
-import { useTheme } from '../contexts';
-import { Button } from '@leanspec/ui-components';
-import { useTranslation } from 'react-i18next';
-
-export function ThemeToggle() {
-  const { setTheme, resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === 'dark';
-  const { t } = useTranslation('common');
-
-  const toggleTheme = () => setTheme(isDark ? 'light' : 'dark');
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={toggleTheme}
-      aria-label={t('theme.toggleTheme')}
-      className="relative h-9 w-9"
-    >
-      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-    </Button>
-  );
-}

package/src/components/Tooltip.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from '../lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-[100] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/context/ContextClient.tsx

@@ -1,471 +0,0 @@
-/**
- * Project Context Client Component
- * Displays project-level context files (AGENTS.md, config, README, etc.)
- * Aligned with Next.js UI implementation - uses structured ProjectContext
- * Spec 131 - UI Project Context Visibility
- */
-
-import * as React from 'react';
-import { BookOpen, Settings, FileText, Copy, Check, AlertCircle, Coins, Info, Search, X } from 'lucide-react';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, Badge, Button, Input } from '@leanspec/ui-components';
-import type { ProjectContext, ContextFile } from '../../types/api';
-import { cn } from '../../lib/utils';
-import { useTranslation } from 'react-i18next';
-import { ContextFileDetail } from './ContextFileDetail';
-import { PageHeader } from '../shared/PageHeader';
-
-interface ContextClientProps {
-  context: ProjectContext;
-}
-
-/**
- * Get token threshold color
- */
-function getTotalTokenColor(tokens: number): string {
-  if (tokens < 5000) return 'text-green-600 dark:text-green-400';
-  if (tokens < 10000) return 'text-blue-600 dark:text-blue-400';
-  if (tokens < 20000) return 'text-yellow-600 dark:text-yellow-400';
-  return 'text-red-600 dark:text-red-400';
-}
-
-/**
- * Count matches in content
- */
-function countMatches(content: string, query: string): number {
-  if (!query || query.length < 2) return 0;
-  const regex = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
-  const matches = content.match(regex);
-  return matches ? matches.length : 0;
-}
-
-/**
- * Empty state component
- */
-function EmptyState({
-  icon: Icon,
-  title,
-  description,
-  suggestion
-}: {
-  icon: React.ComponentType<{ className?: string }>;
-  title: string;
-  description: string;
-  suggestion?: string;
-}) {
-  return (
-    <div className="flex flex-col items-center justify-center py-8 text-center">
-      <Icon className="h-12 w-12 text-muted-foreground/50 mb-4" />
-      <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
-      <p className="text-xs text-muted-foreground/70 mt-1 max-w-xs">{description}</p>
-      {suggestion && (
-        <p className="text-xs text-primary mt-2">{suggestion}</p>
-      )}
-    </div>
-  );
-}
-
-/**
- * Simple file card for list view
- */
-function FileCard({
-  file,
-  searchQuery,
-  onClick,
-}: {
-  file: ContextFile;
-  searchQuery?: string;
-  onClick: () => void;
-}) {
-  const { t } = useTranslation('common');
-  const matches = searchQuery ? countMatches(file.content, searchQuery) : 0;
-  const hasMatch = !searchQuery || matches > 0 || file.name.toLowerCase().includes(searchQuery.toLowerCase());
-
-  if (!hasMatch) return null;
-
-  const matchesLabel = matches === 1
-    ? t('contextPage.badges.matchesSingular', { count: matches })
-    : t('contextPage.badges.matchesPlural', { count: matches });
-
-  const tokensLabel = t('contextPage.badges.tokens', { formattedCount: file.tokenCount.toLocaleString() });
-
-  return (
-    <button
-      onClick={onClick}
-      className="w-full text-left p-4 rounded-lg border border-border bg-card hover:bg-accent transition-colors"
-    >
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2 min-w-0">
-          <FileText className="h-4 w-4 text-primary shrink-0" />
-          <div className="min-w-0">
-            <div className="text-sm font-medium truncate">{file.name}</div>
-            <div className="text-xs text-muted-foreground truncate">{file.path}</div>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 shrink-0">
-          {searchQuery && matches > 0 && (
-            <Badge variant="secondary" className="text-xs bg-yellow-100 dark:bg-yellow-900">
-              {matchesLabel}
-            </Badge>
-          )}
-          <Badge variant="outline" className="text-xs">
-            <Coins className="h-3 w-3 mr-1" />
-            {tokensLabel}
-          </Badge>
-        </div>
-      </div>
-    </button>
-  );
-}
-
-/**
- * Section with collapsible file cards
- */
-function ContextSection({
-  title,
-  description,
-  icon: Icon,
-  files,
-  emptyMessage,
-  emptySuggestion,
-  searchQuery,
-  onFileSelect,
-}: {
-  title: string;
-  description: string;
-  icon: React.ComponentType<{ className?: string }>;
-  files: ContextFile[];
-  emptyMessage: string;
-  emptySuggestion?: string;
-  searchQuery?: string;
-  onFileSelect?: (file: ContextFile) => void;
-}) {
-  const { t } = useTranslation('common');
-  const totalTokens = files.reduce((sum, f) => sum + f.tokenCount, 0);
-
-  // Filter files by search if query exists
-  const filteredFiles = React.useMemo(() => {
-    if (!searchQuery || searchQuery.length < 2) return files;
-    return files.filter(file => {
-      const matches = countMatches(file.content, searchQuery);
-      const nameMatch = file.name.toLowerCase().includes(searchQuery.toLowerCase());
-      return matches > 0 || nameMatch;
-    });
-  }, [files, searchQuery]);
-
-  // Calculate total matches in this section
-  const totalMatches = React.useMemo(() => {
-    if (!searchQuery || searchQuery.length < 2) return 0;
-    return filteredFiles.reduce((sum, file) => sum + countMatches(file.content, searchQuery), 0);
-  }, [filteredFiles, searchQuery]);
-
-  const filteredCount = filteredFiles.length;
-
-  const totalMatchesLabel = React.useMemo(() => (
-    totalMatches === 1
-      ? t('contextPage.badges.matchesSingular', { count: totalMatches })
-      : t('contextPage.badges.matchesPlural', { count: totalMatches })
-  ), [t, totalMatches]);
-
-  const filesLabel = React.useMemo(() => {
-    if (filteredCount === files.length) {
-      return filteredCount === 1
-        ? t('contextPage.badges.filesSingular', { count: filteredCount })
-        : t('contextPage.badges.filesPlural', { count: filteredCount });
-    }
-    return t('contextPage.badges.filesFiltered', { count: filteredCount, total: files.length });
-  }, [files.length, filteredCount, t]);
-
-  const tokensLabel = React.useMemo(
-    () => t('contextPage.badges.tokens', { formattedCount: totalTokens.toLocaleString() }),
-    [t, totalTokens]
-  );
-
-  const emptyTitle = searchQuery
-    ? t('contextPage.search.noMatchesTitle')
-    : emptyMessage;
-
-  const emptyDescription = searchQuery
-    ? t('contextPage.search.noMatchesDescription')
-    : t('contextPage.search.noFilesDescription');
-
-  return (
-    <Card>
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="p-2 rounded-lg bg-primary/10">
-              <Icon className="h-5 w-5 text-primary" />
-            </div>
-            <div>
-              <CardTitle className="text-lg">{title}</CardTitle>
-              <CardDescription>{description}</CardDescription>
-            </div>
-          </div>
-          {files.length > 0 && (
-            <div className="flex items-center gap-2">
-              {searchQuery && totalMatches > 0 && (
-                <Badge variant="secondary" className="text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-                  {totalMatchesLabel}
-                </Badge>
-              )}
-              <Badge variant="secondary" className="text-xs">
-                {filesLabel}
-              </Badge>
-              <Badge variant="outline" className={cn('text-xs', getTotalTokenColor(totalTokens))}>
-                <Coins className="h-3 w-3 mr-1" />
-                {tokensLabel}
-              </Badge>
-            </div>
-          )}
-        </div>
-      </CardHeader>
-      <CardContent>
-        {filteredFiles.length === 0 ? (
-          <EmptyState
-            icon={AlertCircle}
-            title={emptyTitle}
-            description={emptyDescription}
-            suggestion={searchQuery ? undefined : emptySuggestion}
-          />
-        ) : (
-          <div className="space-y-3">
-            {filteredFiles.map((file) => (
-              <FileCard
-                key={file.path}
-                file={file}
-                searchQuery={searchQuery}
-                onClick={() => onFileSelect?.(file)}
-              />
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-export function ContextClient({ context }: ContextClientProps) {
-  const [copiedAll, setCopiedAll] = React.useState(false);
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [selectedFile, setSelectedFile] = React.useState<ContextFile | null>(null);
-  const { t } = useTranslation('common');
-
-  // Collect all content for "Copy All" feature
-  const handleCopyAll = async () => {
-    const allContent: string[] = [];
-
-    // Agent instructions
-    for (const file of context.agentInstructions) {
-      allContent.push(`# ${file.path}\n\n${file.content}\n`);
-    }
-
-    // Config
-    if (context.config.file) {
-      allContent.push(`# ${context.config.file.path}\n\n${context.config.file.content}\n`);
-    }
-
-    // Project docs
-    for (const file of context.projectDocs) {
-      allContent.push(`# ${file.path}\n\n${file.content}\n`);
-    }
-
-    try {
-      await navigator.clipboard.writeText(allContent.join('\n---\n\n'));
-      setCopiedAll(true);
-      setTimeout(() => setCopiedAll(false), 2000);
-    } catch (error) {
-      console.error('Failed to copy all content:', error);
-    }
-  };
-
-  const hasAnyContent =
-    context.agentInstructions.length > 0 ||
-    context.config.file !== null ||
-    context.projectDocs.length > 0;
-
-  // Calculate total matches across all files
-  const totalMatches = React.useMemo(() => {
-    if (!searchQuery || searchQuery.length < 2) return 0;
-    let total = 0;
-    for (const file of context.agentInstructions) {
-      total += countMatches(file.content, searchQuery);
-    }
-    if (context.config.file) {
-      total += countMatches(context.config.file.content, searchQuery);
-    }
-    for (const file of context.projectDocs) {
-      total += countMatches(file.content, searchQuery);
-    }
-    return total;
-  }, [context, searchQuery]);
-
-  // Convert ContextFile to the format expected by ContextFileDetail
-  const selectedFileForDetail = selectedFile ? {
-    name: selectedFile.name,
-    path: selectedFile.path,
-    content: selectedFile.content,
-    size: new Blob([selectedFile.content]).size,
-    tokenCount: selectedFile.tokenCount,
-    lineCount: selectedFile.content.split('\n').length,
-    modified: selectedFile.lastModified instanceof Date ? selectedFile.lastModified.toISOString() : selectedFile.lastModified,
-  } : null;
-
-  // If a file is selected, show the detail view
-  if (selectedFile && selectedFileForDetail) {
-    return (
-      <div className="min-h-screen bg-background">
-        <ContextFileDetail
-          file={selectedFileForDetail}
-          projectRoot={context.projectRoot}
-          onBack={() => setSelectedFile(null)}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6 p-6">
-      <PageHeader
-        title={t('contextPage.title')}
-        description={t('contextPage.description')}
-        actions={hasAnyContent ? (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleCopyAll}
-            className="shrink-0"
-          >
-            {copiedAll ? (
-              <>
-                <Check className="h-4 w-4 mr-2 text-green-600" />
-                {t('contextPage.copyAllSuccess')}
-              </>
-            ) : (
-              <>
-                <Copy className="h-4 w-4 mr-2" />
-                {t('contextPage.copyAll')}
-              </>
-            )}
-          </Button>
-        ) : undefined}
-      />
-
-      {/* Search and Summary */}
-      {hasAnyContent && (
-        <div className="space-y-4">
-          {/* Search bar */}
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="text"
-              placeholder={t('contextPage.searchPlaceholder')}
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10 pr-10"
-            />
-            {searchQuery && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
-                onClick={() => setSearchQuery('')}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-
-          {/* Search results info */}
-          {searchQuery && searchQuery.length >= 2 && (
-            <div className="flex items-center gap-2 text-sm">
-              {totalMatches > 0 ? (
-                <Badge variant="secondary" className="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-                  {totalMatches === 1
-                    ? t('contextPage.badges.matchesFoundSingular', { count: totalMatches })
-                    : t('contextPage.badges.matchesFoundPlural', { count: totalMatches })}
-                </Badge>
-              ) : (
-                <span className="text-muted-foreground">
-                  {t('contextPage.searchNoMatches', { query: searchQuery })}
-                </span>
-              )}
-            </div>
-          )}
-
-          {/* Summary card */}
-          <Card className="bg-muted/30">
-            <CardContent className="py-4">
-              <div className="flex flex-wrap items-center gap-4 sm:gap-8">
-                <div className="flex items-center gap-2">
-                  <Coins className={cn('h-5 w-5', getTotalTokenColor(context.totalTokens))} />
-                  <span className="text-sm">
-                    <strong className={getTotalTokenColor(context.totalTokens)}>
-                      {t('contextPage.summary.totalTokens', { formattedCount: context.totalTokens.toLocaleString() })}
-                    </strong>
-                  </span>
-                </div>
-                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Info className="h-4 w-4" />
-                  {t('contextPage.summary.contextBudget')}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      )}
-
-      {/* Content sections */}
-      <div className="space-y-6">
-        {/* Agent Instructions */}
-        <ContextSection
-          title={t('contextPage.sections.agents.title')}
-          description={t('contextPage.sections.agents.description')}
-          icon={BookOpen}
-          files={context.agentInstructions}
-          emptyMessage={t('contextPage.sections.agents.empty')}
-          emptySuggestion={t('contextPage.sections.agents.suggestion')}
-          searchQuery={searchQuery}
-          onFileSelect={setSelectedFile}
-        />
-
-        {/* Configuration */}
-        <ContextSection
-          title={t('contextPage.sections.config.title')}
-          description={t('contextPage.sections.config.description')}
-          icon={Settings}
-          files={context.config.file ? [context.config.file] : []}
-          emptyMessage={t('contextPage.sections.config.empty')}
-          emptySuggestion={t('contextPage.sections.config.suggestion')}
-          searchQuery={searchQuery}
-          onFileSelect={setSelectedFile}
-        />
-
-        {/* Project Documentation */}
-        <ContextSection
-          title={t('contextPage.sections.docs.title')}
-          description={t('contextPage.sections.docs.description')}
-          icon={FileText}
-          files={context.projectDocs}
-          emptyMessage={t('contextPage.sections.docs.empty')}
-          emptySuggestion={t('contextPage.sections.docs.suggestion')}
-          searchQuery={searchQuery}
-          onFileSelect={setSelectedFile}
-        />
-      </div>
-
-      {/* No content state */}
-      {!hasAnyContent && (
-        <Card className="mt-8">
-          <CardContent className="py-12">
-            <EmptyState
-              icon={BookOpen}
-              title={t('contextPage.emptyState.title')}
-              description={t('contextPage.emptyState.description')}
-              suggestion={t('contextPage.emptyState.suggestion')}
-            />
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}

package/src/components/context/ContextFileDetail.tsx

@@ -1,163 +0,0 @@
-import { useMemo, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeHighlight from 'rehype-highlight';
-import rehypeSlug from 'rehype-slug';
-import { ArrowLeft, Clock, Copy, ExternalLink, FileText, Hash, Layers, Type } from 'lucide-react';
-import { Badge, Button } from '@leanspec/ui-components';
-import { TableOfContents, TableOfContentsSidebar } from '../spec-detail/TableOfContents';
-import { MermaidDiagram } from '../MermaidDiagram';
-import type { ContextFileContent } from '../../types/api';
-import { useTranslation } from 'react-i18next';
-import { formatDate } from '../../lib/date-utils';
-
-interface ContextFileDetailProps {
-  file: ContextFileContent;
-  projectRoot?: string;
-  onBack?: () => void;
-}
-
-function toVSCodeUri(projectRoot: string, filePath: string) {
-  const fullPath = filePath.startsWith('/') ? filePath : `${projectRoot}/${filePath}`;
-  return `vscode://file${fullPath}`;
-}
-
-export function ContextFileDetail({ file, projectRoot, onBack }: ContextFileDetailProps) {
-  const [copied, setCopied] = useState(false);
-  const isMarkdown = file.name.toLowerCase().endsWith('.md');
-  const isJson = file.name.toLowerCase().endsWith('.json');
-  const { t, i18n } = useTranslation('common');
-
-  const headingContent = useMemo(() => file.content, [file.content]);
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(file.content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy context content', err);
-    }
-  };
-
-  const handleOpenInEditor = () => {
-    if (!projectRoot) return;
-    window.open(toVSCodeUri(projectRoot, file.path), '_blank');
-  };
-
-  return (
-    <div className="space-y-6 px-6 py-3">
-      <header className="flex flex-col gap-3 sticky top-14 bg-background py-2 z-10">
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            {onBack && (
-              <Button variant="ghost" size="sm" onClick={onBack} className="h-8 px-2">
-                <ArrowLeft className="h-4 w-4 mr-1" />
-                {t('contextPage.detail.back')}
-              </Button>
-            )}
-            <FileText className="h-5 w-5 text-primary" />
-            <div className="flex flex-col">
-              <h2 className="text-lg sm:text-xl font-semibold leading-tight break-words">{file.name}</h2>
-              <span className="text-xs text-muted-foreground break-all">{file.path}</span>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            {projectRoot && (
-              <Button variant="ghost" size="sm" onClick={handleOpenInEditor} className="h-8 px-3 text-xs">
-                <ExternalLink className="h-3.5 w-3.5 mr-1" />
-                {t('contextPage.detail.openInEditor')}
-              </Button>
-            )}
-            <Button variant="ghost" size="sm" onClick={handleCopy} className="h-8 px-3 text-xs">
-              {copied ? <Hash className="h-3.5 w-3.5 mr-1 text-green-600" /> : <Copy className="h-3.5 w-3.5 mr-1" />}
-              {copied ? t('contextPage.detail.copySuccess') : t('contextPage.detail.copy')}
-            </Button>
-          </div>
-        </div>
-        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-          <Badge variant="outline" className="text-xs flex items-center gap-1">
-            <Type className="h-3 w-3" />
-            {file.fileType || t('contextPage.detail.defaultFileType')}
-          </Badge>
-          <Badge variant="outline" className="text-xs flex items-center gap-1">
-            <Layers className="h-3 w-3" />
-            {t('contextPage.badges.tokens', { formattedCount: file.tokenCount.toLocaleString() })}
-          </Badge>
-          <Badge variant="outline" className="text-xs flex items-center gap-1">
-            <FileText className="h-3 w-3" />
-            {t('contextPage.detail.lines', { count: file.lineCount })}
-          </Badge>
-          <span className="flex items-center gap-1">
-            <Clock className="h-3.5 w-3.5" />
-            {t('contextPage.detail.modified', {
-              date: formatDate(file.modified ?? file.modifiedAt, i18n.language),
-            })}
-          </span>
-          <span className="text-muted-foreground">•</span>
-          <span>{t('contextPage.detail.size', { size: (file.size / 1024).toFixed(1) })}</span>
-        </div>
-      </header>
-
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
-        <div className="overflow-hidden p-4 sm:p-6">
-          {isJson ? (
-            <pre className="p-3 text-sm overflow-x-auto bg-muted/40 rounded-md border whitespace-pre-wrap">
-              {(() => {
-                try {
-                  return JSON.stringify(JSON.parse(file.content), null, 2);
-                } catch (err) {
-                  console.error('Failed to parse JSON context file', err);
-                  return file.content;
-                }
-              })()}
-            </pre>
-          ) : isMarkdown ? (
-            <article className="prose prose-slate dark:prose-invert max-w-none prose-sm sm:prose-base">
-              <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                rehypePlugins={[rehypeHighlight, rehypeSlug]}
-                components={{
-                  pre: ({ children, ...props }) => {
-                    const childArray = Array.isArray(children) ? children : [children];
-                    const firstChild = childArray[0];
-                    if (
-                      firstChild &&
-                      typeof firstChild === 'object' &&
-                      'props' in firstChild &&
-                      typeof (firstChild as { props?: { className?: string; children?: string } }).props?.className === 'string' &&
-                      (firstChild as { props?: { className?: string } }).props?.className?.includes('language-mermaid')
-                    ) {
-                      const code = (firstChild as { props?: { children?: string } }).props?.children;
-                      const content = typeof code === 'string' ? code : '';
-                      return <MermaidDiagram chart={content} />;
-                    }
-                    return <pre {...props}>{children}</pre>;
-                  },
-                }}
-              >
-                {file.content}
-              </ReactMarkdown>
-            </article>
-          ) : (
-            <pre className="p-3 text-sm overflow-x-auto bg-muted/40 rounded-md border whitespace-pre-wrap">
-              {file.content}
-            </pre>
-          )}
-        </div>
-
-        {isMarkdown && (
-          <aside className="hidden xl:block sticky top-28 h-[calc(100vh-8rem)] overflow-y-auto">
-            <TableOfContentsSidebar content={headingContent} />
-          </aside>
-        )}
-      </div>
-
-      {isMarkdown && (
-        <div className="xl:hidden">
-          <TableOfContents content={headingContent} />
-        </div>
-      )}
-    </div>
-  );
-}